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: 0;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文檔，知道它能做什么，然后你需要哪方面的功能，就再專門細看一下這塊的功能文檔和示例，然后自己照着改就可以了。