MVC项目中使用百度地图

已经很久没更新博客了，因为最近一直在学习前端的知识，没那么多时间，写博客或者写文章不但没有钱，写得好还好说，如果写得不好，一些吃瓜群众，不仅要喷你，搞不好还要人身攻击就不好了。所以写博客的人，脸皮得厚，像我这样，任凭骂我千百遍，我依旧坚持写，也不怕侮辱了谁的眼睛，哈哈~我发现有些做技术比较厉害的人，多少都有些脾气，你永远不知道他什么时候突然就消失在园子里了......

在使用百度地图之前，我们要先去百度开放平台申请ak。地址：http://lbsyun.baidu.com/

填写开发者认证信息，你可以以个人名义，也可以以公司名义申请一个秘钥，企业开发者认证功能更加强大。在前期做技术开发，我们通常以个人名义申请一个秘钥，等以后项目要上线的时候切换到企业的秘钥就可以了。在进行认证的时候，可能会遇到一些问题，比如说：手机号已经注册，这表示，你曾经申请过，你可以找出你曾经申请时使用的百度账号，用那个账号进行登录。有些人不知道如何填写使用场景信息，这项要求写200字以上。我提供一个Demo仅供参考：

我们公司是做物联网节能的，现在公司的项目需要使用到百度地图，前期技术调研，需要先以开发者个人的名义注册一个账号进行开发用，后面会以公司的名义重新申请百度开发者账号，主要用于医院、商场等大型建筑的地图定位以及手机端维修工人的位置定位
，以方便清楚维修工人所在的地理位置。我们希望可以在系统中定位到具体某一座城市的大型建筑，并能够缩放建筑二维平面图的大小，以及定位到使用公司App的运维人员所在的位置，方便安排就近的员工对建筑中需要维修的设备进行维修和保养工作。基于以上的需求，
需要应用到贵公司的百度地图服务，还望批准！不甚感谢！

填写完认证信息之后，三五个工作日之内，就会审核，审核通过后，你就可以去创建应用了。

如果你是BS项目中使用，你的应用类型选择“浏览器端”

用百度地图生成器，去生成代码，地址：http://api.map.baidu.com/lbsapi/creatmap/index.html

将生成的代码，直接复制粘贴到项目页面中就可以使用，但是生成的代码毕竟是生成的，你需要自己进行重构。

你还可以去百度API示例中去寻找例子，然后进行修改，改造成你需要的样子。地址：http://developer.baidu.com/map/jsdemo.htm#c1_3

假如我要做成下面的效果：

可以看出是要添加多个覆盖物，注意，这不是信息窗口，因为信息窗口只能在页面中显示一个，而且使用信息窗口有一个很蛋疼的事情，那就是信息窗口的最小宽度是250px，你无法修改。

在母版页中添加百度api引用

    <script type="text/javascript" src="http://api.map.baidu.com/api?ak=你的秘钥&v=2.0"></script>

需要注意的是要在jquery.js之前引用，否则会有冲突。

View视图代码如下：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<!--引用百度地图API-->
<div style="margin-bottom:5px;">
    <input class="form-control input-inline" id="txtWords" placeholder="搜索地区" value="" type="text" />
    <button id="btnSearch" class="btn sbold yellow-casablanca" onclick="searchMap();">
        <i class="fa fa-search"></i>搜索地图
    </button>
</div>
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="mapContent"></div>
@section scripts
{
<script src="~/Content/js/common/base-BaiduMap.js"></script>
    <script type="text/javascript">
    //标注点数组
    var markerArr = [
    {
        title: "紫衡技术", electricity: "0kwh", water: "1吨", air: "0m³", alarm: "2次", point: "114.011944|22.602072", isOnline: 0
    },
    {
        title: "银谷科技", electricity: "10kwh", water: "2吨", air: "30m³", alarm: "1次", point: "114.011086|22.601413", isOnline: 0
    }
    ];
    BaiduMapObj.init("mapContent", 114.011944, 22.602072, markerArr,19);//创建和初始化地图
    function searchMap(){
        BaiduMapObj.searchMap("mapContent","txtWords",markerArr);
    }
    </script>
}

css样式我放到独立的样式文件中，通过母版页进行引入

/*--------------百度地图----------------*/
.iw_poi_title {
    color: white;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    padding-right: 13px;
    white-space: nowrap;
}
.iw_poi_content {
    font: 12px arial,sans-serif;
    overflow: visible;
    padding-top: 4px;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}
.OverlayInsideDiv{position:absolute;height:140px;width:130px;overflow:hidden;opacity:0.9;}
.OverlayInsideDiv p{ margin: 5px 0 0;padding:;color:#3B9B8B;}
.OverlayInsideDiv p span{color:#8B8E93;}

将要使用的js进行封装，base-BaiduMap.js代码如下：

// ajax加载调试用
//# sourceURL=base-BaiduMap.js

//BaiduMapObj 百度地图扩展--created by zouqj 2017-8-24
var BaiduMapObj = (function () {
    var map = null;
    var iconObj = { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5 }
    //创建一个Icon
    var createIcon = function (json) {
        var icon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
        return icon;
    }
    //搜索地区(地区）
    this.searchMap = function (id, txtWords, markerArr) {
        var area = document.getElementById(txtWords).value; //得到地区
        var ls = new BMap.LocalSearch(map);
        ls.setSearchCompleteCallback(function (rs) {
            if (ls.getStatus() == BMAP_STATUS_SUCCESS) {
                var poi = rs.getPoi(0);
                if (poi) {
                    BaiduMapObj.init(id, poi.point.lng, poi.point.lat, markerArr);
                }
            }
        });
        ls.search(area);
    };
    //创建地图函数：
    this.createMap=function(id,x, y, _level) {
        var map = new BMap.Map(id);//在百度地图容器中创建一个地图
        var point = new BMap.Point(x, y);//定义一个中心点坐标
        map.centerAndZoom(point, _level);//设定地图的中心点和坐标并将地图显示在地图容器中
        return map;
    }
    //地图事件设置函数：
    this.setMapEvent = function (map) {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    //地图控件添加函数：
    this.addMapControl = function (map) {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        map.addControl(ctrl_sca);
    }
    //创建marker
    this.addMarker = function (map,markerArr) {
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0, p1);
            //var iconImg = createIcon(icon);
            var marker = new BMap.Marker(point);//创建图标 , { icon: iconImg }
            //var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title, { "offset": new BMap.Size(iconObj.lb - iconObj.x + 10, -20) });
            marker.setLabel(label);
            map.addOverlay(marker);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            label.setStyle({
                borderColor: "#808080",
                color: "#333",
                cursor: "pointer",
                border: "0px",
                'background-color': ""
            });

            //(function () {
            //    var index = i;
            //    var _iw = createInfoWindow(i);
            //    var _marker = marker;
            //    _marker.addEventListener("click", function () {
            //        this.openInfoWindow(_iw);
            //    });
            //    _iw.addEventListener("open", function () {
            //        _marker.getLabel().hide();
            //    })
            //    _iw.addEventListener("close", function () {
            //        _marker.getLabel().show();
            //    })
            //    label.addEventListener("click", function () {
            //        _marker.openInfoWindow(_iw);
            //    })
            //    if (!!json.isOpen) {
            //        label.hide();
            //        _marker.openInfoWindow(_iw);
            //    }
            //    _marker.openInfoWindow(_iw);
            //})()
        }
    }
    // 复杂的自定义覆盖物
    function ComplexCustomOverlay(point, text, mouseoverText) {
        this._point = point;
        this._text = text;
        if (mouseoverText != undefined) {
            this._overText = mouseoverText;
        }
    }
    //创建覆盖物
    this.addOverLay = function (map,markerArr) {
        ComplexCustomOverlay.prototype = new BMap.Overlay();
        ComplexCustomOverlay.prototype.initialize = function (map) {
            this._map = map;
            var div = this._div = document.createElement("div");
            div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);

            var arrow = this._arrow = document.createElement("div");
            div.className = "OverlayInsideDiv";
            arrow.style.position = "absolute";
            arrow.style.top = "10px";
            arrow.style.left = "10px";
            arrow.innerHTML = this._text;
            div.appendChild(arrow);

            div.style.backgroundColor = "#313642";
            arrow.style.backgroundPosition = "0px 0px";
            map.getPanes().labelPane.appendChild(div);

            return div;
        }
        ComplexCustomOverlay.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
            this._div.style.top = pixel.y - 30 + "px";
        }
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var txt = "<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><p><span>电耗：</span>" + json.electricity
                + "<p><span>水耗：</span>" + json.water + "</p><p><span>气耗：</span>" + json.air + "</p><p><span>报警：</span>" + json.alarm + "</p>";
            var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(p0, p1), txt);
            map.addOverlay(myCompOverlay);
        }
    }
    //初始化(地图容器id，中心点坐标x，y，标注点数组，[地图等级：默认19]）
    this.init = function (id,x, y, markerArr, level) {
        var _level = level == undefined ? 19 : level;
        map = BaiduMapObj.createMap(id, x, y, _level);
        BaiduMapObj.setMapEvent(map);//设置地图事件
        BaiduMapObj.addMapControl(map);//向地图添加控件
        BaiduMapObj.addMarker(map,markerArr);//向地图中添加marker
        BaiduMapObj.addOverLay(map,markerArr);//向地图中添加覆盖物
    }
    return this;
}).call({});

你会发现在js代码的最顶部，我添加了如下代码：

//# sourceURL=base-BaiduMap.js

这是因为我项目是使用ajax布局，动态加载页面和页面的js的，所以如果你不添加此代码，在浏览器中将无法进行调试，因为浏览器的调试器中将看不到这个动态加载进来的js文件。sourceURL=后面的是别名，通常和文件名一致方便区分。把这个功能模块的js全部封装到一个对象中，这样就只暴露了一个全局变量入口。我前端js这一块很戳，被以前公司的前端说“基础太差”，所以大家将就着看，毕竟我现在还是一个准初级前端工程师......

这实在是太简单了，没什么好讲的，只是有一点，大家在写代码的过程中，尽量做到不要重复你的代码，这是最最基本的原则。

其实，使用一些第三方的API，真的很简单，你只需要先大概过一遍API文档，知道它能做什么，然后你需要哪方面的功能，就再专门细看一下这块的功能文档和示例，然后自己照着改就可以了。