With asp.net MVC 3 load Baidu map data (combined with Baidu API)

Introduction: Baidu Map callout data loading combined with Baidu API (http://openapi.baidu.com/map/jsdemo.htm) and Baidu Pickup coordinate system (http://dev.baidu.com/wiki/static/ map/api/tool/getpoint/) Both are indispensable, the following is to say detailed call and implementation methods. (Note: Using the asp.net mvc 3) 1. Front page Code

@{
    Layout = null;
}
<! DOCTYPE html>
 
2. Background control Implementation Code 

Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Web;
Using SYSTEM.WEB.MVC;

Using System.Text; Namespace Map.controllers {public class Mapcontroller:controller {////Get:/map/pu
        Blic ActionResult Index () {return View ();
            [HttpGet]///default Load Data public ActionResult Searchmap () {//default two annotations list<map> maplist = new list<map> () {new Map () {centerlat=113.929963m, centerlng=22.530031m,
            ZOOM=12}, new Map () {centerlat=113.925076m, centerlng=22.498781m, zoom=12}};
            StringBuilder str = new StringBuilder (); foreach (map map in maplist) {str. Append (String. Format (' {0},{1},{2}; ', map. Centerlat, map. CENTERLNG, map.
            Zoom)); } return Json (str.
        ToString (), jsonrequestbehavior.allowget);
        }//Callout entity public class Map {///<summary>///longitude///</summary> Public decimal?

        CENTERLNG {get; set;} <summary>///latitude///</summary> public decimal?

        Centerlat {get; set;} <summary>//////</summary> public decimal?

    Zoom {get; set;} }
}
 
 2.js Implementation Code   
var enablescrollwheelzoom = true;
var map = null;
var zoom = 15;
var mapPoint = null;
var Enablekeyboard = true;
var enablecontinuouszoom = true;
var enableinertialdragging = true;

var communitylist = [];//coordinate data set var markerlist = [];
    function Initcommunitylist (data) {communitylist.length = 0;
        if ($.trim (data)!= "") {var strcommunitylist = Data.split (";"); $.each (strcommunitylist, function (I, item) {if ($.trim (item)!= "") {var instance = Item.sp
                Lit (",");
                var community = new Object (); Community. CENTERLNG = instance[0];//Horizontal axis community. Centerlat = instance[1];//Vertical coordinate community.     Zoom = instance[2]; than column ruler//if there is no coordinate, the callout data is not added if (community). Centerlat!= -1000 && community.
                CENTERLNG!= -1000) {communitylist[communitylist.length] = community;
    }
            }
        }); Write a custom function to create a callout function Addmarker (commuinity) {var marker = _createnormalmarker (commuinity);
    Map.addoverlay (marker);
Markerlist[markerlist.length] = marker;
    //Refresh map callout, and map positioning function Refreshmarker () {clearmarker ();  if (Communitylist.length > 0) {for (var index = 0; index < communitylist.length; index++) {var
            community = Communitylist[index];
        Addmarker (community);
        var commuinty = communitylist[0]; var firstpoint = new Bmap.point (commuinty. CENTERLNG, Commuinty.
        Centerlat); Map.centerandzoom (Firstpoint, Number (community).
    Zoom));                 else {map.centerandzoom (mapPoint, zoom); Initialize map, set center point coordinates and MAP level}//Clear history Callout function Clearmarker () {if (Markerlist.length > 0) {Map.clearov
        Erlays ();
        For (i in markerlist) {markerlist[i] = null;
    } markerlist.length = 0; }///Create verbose callout function _createnormalmarker (commuinity) {var point = new Bmap.point (commuinity. CENTERLNG, commuinity.
    Centerlat);
    var marker = new Bmap.marker (point, {offset:new bmap.size (0, 13)});
            Marker.addeventlistener ("click", Function (e) {var opts = {width:400, height:250,
        Title: " 

Download Address: http://www.kuaipan.cn/file/id_99609865076342785.htm

 

The final implementation of the effect as shown