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="https://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: 0;color:#3B9B8B;}.OverlayInsideDiv p span{color:#8B8E93;}

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

// ajax加载调试用//# sourceURL=base-BaiduMap.js//BaiduMapObj 百度地图扩展--created by zouqj 2017-8-24var 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({});

View Code

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

//# sourceURL=base-BaiduMap.js

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

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

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

MVC项目中使用百度地图

付鹏FuPeng

相关推荐

评论抢沙发

评论前必须登录！

付鹏FuPeng

相关推荐

评论 抢沙发

评论前必须登录！

评论抢沙发