C # Baidu map development (4) Front-end display and positioning,

C # Baidu map development (4) Front-end display and positioning,

In "C # Baidu map development (3) Obtaining location, business area, and surrounding information based on coordinates", the location information of coordinates is obtained. With this positioning information, so how can we display it on the front-end page? This requires the JavaScript API of Baidu map. The following is the sample code.

Front-end code

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "ViewMap. aspx. cs" Inherits = "TEST. ViewMap" %> <! DOCTYPE html> 

Note:

(1) In script, the accesskey after the http://api.map.baidu.com is the applied key, consistent with the key mentioned in the previous article.
(2). references the jquery library.
(3) If the library of jquery. mobile is also referenced to adapt to the use of the mobile terminal, remember to set the corresponding height and width of the div, otherwise it may display a blank area. Because jquery. mobile will adapt to the page during rendering.
(4) The part of the loaded map is encapsulated in map. js. The Code is as follows:

Var MapApi = (function () {return {LoadLocationMap: function (lat, lng, containerId, showText) {// <summary> load Map </summary> /// <param name = "lat"> latitude value </param> /// <param name = "lng"> longitude value </param> /// <param name = "containerId"> map container ID, it is generally the Id of the Div. </param> var map = new BMap. map (containerId); // create Map instance var point = new BMap. point (lng, lat); // create Point coordinate var marker = new BMap. marker (point); // creates a map annotation. addOverlay (marker); // Add the annotation to the map. centerAndZoom (point, 15); map. enableScrollWheelZoom (); // enable the scroll wheel to zoom out var opts = {width: 50, // information window width height: 30, // information window height title: showText, // The message window title enableMessage: false, // you can specify whether to allow the message window to send a short message: showText} var infoWindow = new BMap. infoWindow ("", opts); // creates an Information Window object map. openInfoWindow (infoWindow, point); // enable information window}, LoadMap: function (lat, lng, panoramaContainerId, normalMapContainerId) {// The panorama displays var panorama = new BMap. panorama (panoramaContainerId); panorama. setPosition (new BMap. point (lng, lat); // displays the panorama Based on the longitude and latitude coordinates. setPov ({heading:-40, pitch: 6}); panorama. addEventListener ('position _ changed ', function (e) {// after the position of the panorama changes, the center of the normal map also changes var pos = panorama. getPosition (); map. setCenter (new BMap. point (pos. lng, pos. lat); marker. setPosition (pos) ;}); // normal map display var mapOption = {mapType: BMAP_NORMAL_MAP, maxZoom: 18, drawMargin: 0, enableFulltimeSpotClick: true, enableHighResolution: true} var map = new BMap. map (normalMapContainerId, mapOption); var testpoint = new BMap. point (lng, lat); map. centerAndZoom (testpoint, 18); var marker = new BMap. marker (testpoint); marker. enableDragging (); map. addOverlay (marker); marker. addEventListener ('dragend', function (e) {panorama. setPosition (e. point); // After the marker is dragged, the position of the panorama changes as well. setPov ({heading:-40, pitch: 6 });});}}})();
Note: This JS also encapsulates the panorama function.

Next let's take a look at the backend code.

public partial class ViewMap : System.Web.UI.Page    {        protected void Page_Load(object sender, EventArgs e)        {            if (!IsPostBack)            {                InitLoad();            }        }        private void InitLoad()        {            Coordinate coordinate = new Coordinate("39.92", "116.46");            CoordLocationResult coordLocationResult = BaiduMap.FetchLocation(coordinate);            HiddenAddress.Value = coordLocationResult.result.formatted_address;            HiddenCoord.Value = String.Format("{0},{1}",                                               coordLocationResult.result.location.lat,                                               coordLocationResult.result.location.lng);        }    }
Note:

(1). Use BaiduMap. FetchLocation to obtain the location information of coordinates.
(2) Assign the obtained address and coordinates to the hidden domain so that the front end can use JS to read the data.
The test result is as follows:

In this way, the front-end positioning of coordinates is realized. Of course, if necessary, you can also draw the coordinates obtained in a certain period of time on the map. For details, refer to the description of Baidu map.
This is based on coordinates, and coordinates are usually located on mobile devices. What if the coordinates are located on the PC end? This requires IP location. For more information, see "C # Baidu map development (5) IP location".
For more information, see http://blog.csdn.net/xxdddail/article/details/42706113.