百度地图在项目中的使用(JS)

废话先：

---

这个项目是使用ASP.NET MVC 写的，而关于百度地图在项目中的应用不限于ASP.NET MVC 因为我大部分的API的使用是通过Javascript，想在项目中使用百度地图，你得先成为百度的开发者，具体的步骤，在本篇博文中不多叙述。

主题：

---

在使用百度地图的时候，你得先要获得一个ak

这里就是点击创建应用，它提供了几个类别1.for server  2.for mobile 3.for browser，在这里呢，因为我们是通过一个for browser来了解百度地图，所以在创建应用时，勾选for browser,这里有一点需要注意就是在下面的Referer中填上一个*，因为我们在这里就是一个测试，还没有真正的应用到项目中，点击创建后，读者所见到的应该和我的差不多，有了ak，下面的就好办了。

首先呢，在你的ASP.NET MVC 项目里创建一个Controller，并且创建一个与index action对应的view，那我们在这个index.cshtml中要引入这样一段:<script type="text/javascript" src=http://api.map.baidu.com/api?v=2.0&ak=your_ak></script>

当然了还需要这样一个<div>这个层的作用就是显示你的地图，我的是这么写的：

<div id="container" style="85%;height:100%;float:left;border-right:2px solid #bcbcbc"></div>

window.onload = function () {
        mapPoint = new BMap.Point(114.433694, 30.4503);
        map = new BMap.Map("container");
        map.centerAndZoom(mapPoint, zoom);//初始化地图，设置中心点坐标和地图的级别
        map.enableScrollWheelZoom();
        map.addControl(new BMap.NavigationControl());//添加默认缩放平移控件

        //从服务获得客户端的具体数据
        $.getJSON("/BMap/getMapInfo", function (data) {
            _initCom(data);
            RefreshMarker();
        });
    }

这是我一段js代码，就是在这个view加载的时候立马执行地图的定位和初始化，相应的注解我都在上面注释了，

下面这是_initCom方法的具体代码：

    function _initCom(data) {
        CommunityList.length = 0;
        if ($.trim(data) !== "") {
            var strCommunityList = data.split(";"); //分割字符串
            $.each(strCommunityList, function (i,item) {    //遍历
                if ($.trim(item) !== "") {
                    var instance = item.split(","),
                        community = {};     //保存数据信息
                    community.lng = instance[0];
                    community.lat = instance[1];
                    community.content = instance[2];
                    community.createTime = instance[3];
                    community.studentId = instance[4];
                    if (community.lng !== -1000 && community.lat !== -1000) {
                        CommunityList[CommunityList.length] = community;
                    }
                }
            });
        }
    }

这是在我得到了相应的数据之后将数据格式化为我想要处理的字符格式。

下面这是整个的js代码，我先为大家贴出来，好让大家有一个整体的感受：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_ak"></script>
<div id="container" style="85%;height:100%;float:left;border-right:2px solid #bcbcbc"></div>

<div id="searchResult" style="height:100%;15%;float:right;background-color:#c7c7c7">
    <div id="userControl" style="margin-top:100px;">
        <p>请输入学生的ID</p>
        <input id="keyword" type="text" style="150px" />
        <input type="button" value="搜索" onclick="search()" />
        <input type="button" value="刷新地图" onclick="RefreshMarker()" style="margin-top:50px;float:right" />
    </div>

</div>

<script type="text/javascript">
    var map = null,
        zoom = 15,
        selfmarker = null,
        mapPoint = null,
        CommunityList = [], //数据集合
        MarkerList = [];    //标注集合

    function search() {
        var KW = $('#keyword').val().trim(),
            reg = /^[0-9]*$/;       //这边可以根据需要进一步的正则！
        if (!reg.test(KW)) {
            alert('请键入学生的ID');
        } else {
            _search = [];
            if (MarkerList.length > 0) {
                for (var i = 0; i < CommunityList.length; i++) {
                    if (CommunityList[i].studentId === KW) {
                        _search.push(CommunityList[i]); //将符合要求的学生添加到一个数组中
                    }
                }
                if (_search.length === 0) {
                    alert("没能找到您搜索的学生，请确保Id正确");
                    return false;
                } else {
                    searchResult(_search);
                }

            } else {
                map.centerAndZoom(mapPoint, zoom);
            }
        }
    }

    function searchResult(_data) {
        map.clearOverlays();        //当显示搜索结果时，先清除页面上的marker
        $.each(_data, function (i, data) {
            var lng = data.lng,
           lat = data.lat,
           content = data.content,
           time = data.createTime,
           point = new BMap.Point(lng, lat),
           marker = new BMap.Marker(point),
           label = new BMap.Label(data.studentId);
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor: "#808080",
                color: "#333",
                cursor: "pointer"
            });

            (function () {
                var options = {
                     280,
                    height: 128,
                    title: "<strong>学生信息</strong>"
                }
                var _data = data,
                    _Iw = createInfoWindow(_data, options),
                    _marker = marker;
                _marker.addEventListener("click", function () {
                    this.openInfoWindow(_Iw);
                });
                _marker.addEventListener("open", function () {
                    _marker.getLabel().hide();
                });
                _marker.addEventListener("close", function () {
                    _marker.getLabel().show();
                });
                label.addEventListener("click", function () {
                    _marker.openInfoWindow(_Iw);
                })
            })();
        });

    }

    function _initCom(data) {
        CommunityList.length = 0;
        if ($.trim(data) !== "") {
            var strCommunityList = data.split(";"); //分割字符串
            $.each(strCommunityList, function (i,item) {    //遍历
                if ($.trim(item) !== "") {
                    var instance = item.split(","),
                        community = {};     //保存数据信息
                    community.lng = instance[0];
                    community.lat = instance[1];
                    community.content = instance[2];
                    community.createTime = instance[3];
                    community.studentId = instance[4];
                    if (community.lng !== -1000 && community.lat !== -1000) {
                        CommunityList[CommunityList.length] = community;
                    }
                }
            });
        }
    }


    function addMarker(commuinity) {
        selfmarker = _createNorMarker(commuinity);
        map.addOverlay(selfmarker);
        MarkerList[MarkerList.length] = selfmarker;
    }


    function RefreshMarker() {
        clearMarker();
        map.clearOverlays();
        if (CommunityList.length > 0) {
            for (var i = 0; i < CommunityList.length; i++) {
                var community = CommunityList[i];
                addMarker(community);
            }

            var fistcommuinty = CommunityList[0],
                firstPoint = new BMap.Point(fistcommuinty.lng, fistcommuinty.lat);
            map.centerAndZoom(firstPoint, zoom);
        } else {
            map.centerAndZoom(mapPoint, zoom);
        }
    }

    function clearMarker() {
        if (MarkerList.length > 0) {
            for (var i = 0; i < CommunityList.length; i++) {
                var community = CommunityList[i];
                addMarker(community);
            }
        } else {
            map.centerAndZoom(mapPoint, zoom);
        }
    }

    //创建信息提示窗
    function createInfoWindow(commuinity,options) {
        var content = "<br />" + "这是学生Id为：" + commuinity.studentId + "的内容<br/>" + commuinity.content + "<br />提交时间：" + commuinity.createTime;
        var infoWindow = new BMap.InfoWindow(content, options);
        return infoWindow;
    }

    function _createNorMarker(commuinity) {
        var point = new BMap.Point(commuinity.lng, commuinity.lat),
            marker = new BMap.Marker(point, { offset: new BMap.Size(0, 13) });
        marker.addEventListener("click", function (e) {
            var options = {
                 280,
                height: 128,
                title: "<strong>学生具体地理信息</strong>"
            }

            infoWindow = createInfoWindow(commuinity,options);
            map.openInfoWindow(infoWindow, e.point);
        });

        marker.tag = commuinity;
        map.addOverlay(marker);
        return marker;
    }

    //窗口打开就加载
    window.onload = function () {
        mapPoint = new BMap.Point(114.433694, 30.4503);
        map = new BMap.Map("container");
        map.centerAndZoom(mapPoint, zoom);//初始化地图，设置中心点坐标和地图的级别
        map.enableScrollWheelZoom();
        map.addControl(new BMap.NavigationControl());//添加默认缩放平移控件

        //从服务获得客户端的具体数据
        $.getJSON("/BMap/getMapInfo", function (data) {
            _initCom(data);
            RefreshMarker();
        });
    }
</script>

在这里大家可能会注意到我写了一个Search的方法，那么为什么需要写这个方法呢，这也是因为在这个项目中的需要，就是我从数据库当中获得了学生的具体上传的地理数据，但是，我现在就想知道一个学生近一段时间上传的具体的数据，我总不会一个个的找吧，几个学生还好，要是成百上千，那不得要人命了啊！在这里呢，我搜索的数据是，静态数据的的搜索，也就是数据已经加载完成了，我从现有的数据中搜索，在这里我的那些坐标也就是我通过百度坐标获取这个工具获得的。

下面的这段代码是我在BMapController中的：

public ActionResult getMapInfo()
        {
            //这是些测试数据
            var listmap = new List<WorkLog>(){
                new WorkLog{Longitude = "114.433694",Latitude = "30.4503",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "1"},
                new WorkLog{Longitude = "114.428093",Latitude = "30.448393",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "1"},
                new WorkLog{Longitude = "114.431075",Latitude = "30.442678",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "3"},
                new WorkLog{Longitude = "114.443041",Latitude = "30.454072",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "4"},
                new WorkLog{Longitude = "114.430464",Latitude = "30.456921",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "4"},
                new WorkLog{Longitude = "114.435951",Latitude = "30.455818",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "4"},
                new WorkLog{Longitude = "114.421248",Latitude = "30.458477",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "7"},
                new WorkLog{Longitude = "114.440058",Latitude = "30.44358",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "8"},
                new WorkLog{Longitude = "114.429225",Latitude = "30.439984",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "9"},
                new WorkLog{Longitude = "114.425524",Latitude = "30.45099",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "10"},
                new WorkLog{Longitude = "114.431668",Latitude = "30.448764",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "11"},
                new WorkLog{Longitude = "114.435693",Latitude = "30.449667",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "12"},
                new WorkLog{Longitude = "114.436878",Latitude = "30.450165",ContentValue = "这是学生提交的信息内容",ReportTime = DateTime.Now.ToLocalTime(),StudentId = "13"}
            };

            StringBuilder str = new StringBuilder();
            foreach (WorkLog wl in listmap)
            {
                str.Append(string.Format("{0},{1},{2},{3},{4};", wl.Longitude, wl.Latitude, wl.ContentValue, wl.ReportTime,wl.StudentId));
            }
            return Json(str.ToString(), JsonRequestBehavior.AllowGet);
        }

        public ActionResult Index()
        {
            return View();

        }

因为这里只是一个测试，我直接将一些数据写上去了，没有从数据库中读取。

如果有更多的项目需要，还可以在继续看它的API。

声明：

---

本篇博客属于原创，允许转载，但是必须注明原文的地址！！