百度地圖API自定義地圖

一、使用說明   JavaScript API v1.4及以前版本無須申請密鑰（ak），自v1.5版本開始需要先申請密鑰（ak），才可使用。僅JavaScript API V2.0 版本支援https，其他JavaScript API版本均不支援。手機端引用需要添加meta标簽<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> （這裡需要注意一點：meta标簽中的值不能改變，有些移動端寫法可能改變了meta标簽的值會造成移動端地圖字型特别小的問題）。在使用百度地圖JavaScript API服務時，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）進行展示，需先将其他坐标轉換為BD09。

二、百度地圖使用

html中

<div style="width:100%;height:550px;" id="map"></div>      //一定要有寬度和高度來顯示地圖
           

1、引用百度地圖API檔案 

http://api.map.baidu.com/api?v=1.4 //參數v表示您加載API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。
http://api.map.baidu.com/api?v=2.0&ak=您的密鑰  //使用JavaScript APIv2.0請先申請密鑰ak，按此方式引用。
           

2、建立地圖執行個體

var map = new BMap.Map("map");       //BMap命名空間下的Map類表示地圖，通過new操作符可以建立一個地圖執行個體，參數可以是元素id也可以是元素對象
           

3、建立點坐标

var point = new BMap.Point(116.404, 39.915);  //用BMap命名空間下的Point類來建立一個坐标點
           

4、地圖初始化

map.centerAndZoom(point, 15);  //BMap.Map.centerAndZoom()方法要求設定中心點坐标和地圖級别。地圖必須經過初始化才可以執行其他操作。
           

以上這樣就可以實作一個百度地圖的簡單調用

5、地圖狀态的變化

map.panTo(new BMap.Point(116.409, 39.918));    //panTo()方法将讓地圖平滑移動至新中心點，如果移動距離超過了目前地圖區域大小，則地圖會直跳到該點。
           

6、添加控件配置

map.enableScrollWheelZoom(true); //啟用滾輪放大縮小
//向地圖中添加縮放控件
var ctrlNav = new window.BMap.NavigationControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//向地圖中添加縮略圖控件
var ctrlOve = new window.BMap.OverviewMapControl({
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
    isOpen: 1
});
map.addControl(ctrlOve);
//向地圖中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
    anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
//地圖示記點選事件;info是資訊數組，index是資訊數組中索引
map.clickelen = function(elem,info,index){
    elem.openInfoWindow(info[index]);
};
           

map.addControl(new BMap.NavigationControl());    //添加平移縮放控件
map.addControl(new BMap.ScaleControl());     //添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加縮略圖控件
           

7、修改控件樣式

var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}       //修改平移控件樣式
map.addControl(new BMap.NavigationControl(opts));
           

var opts = {offset: new BMap.Size(150, 5)}       //修改比例尺的偏移位置
map.addControl(new BMap.ScaleControl(opts));     
           

8、判斷是否支援h5浏覽器定位

function map_init() {
    //判斷是否支援h5浏覽器定位start
    map= new BMap.Map("map");
    if (navigator.geolocation){
        window.navigator.geolocation.getCurrentPosition(function(position){
            //ios10
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(position){
            　　lat = position.point.lat;
            　　lng = position.point.lng;
            　　mapGPS(lat,lng,10);    //擷取成功定位後執行的函數
            },function(error){
            　　alert("errorCode:"+error.code+",errorMessage:"+error.message);
            　　console.log("errorCode:"+error.code+",errorMessage:"+error.message);
            });
            //IOS10 end
        }, function(error){
           // oalert("GPS信号不穩定,無法精确定位");
            function theLocation(cityName){//根絕城市名定位
            　　var city = cityName;
            　　if(city != ""){
            　　　　map.centerAndZoom(cityName,11);      // 用城市名設定地圖中心點
            　　}
            }
            function myFun(result){
            　　var cityName = result.name;
            　　//擷取城市名cityName
            　　theLocation(cityName);
            }
            var myCity = new BMap.LocalCity();
            myCity.get(myFun);
        });
    }else{
        alert("無法擷取目前位置");
    }
    //判斷是否支援h5浏覽器定位end
}
           

9、動态添加多個标注點以及點選标注點彈出資訊框

var point = new Array(); //存放标注點經緯資訊的數組
var marker = new Array(); //存放标注點對象的數組
var info = new Array(); //存放提示資訊視窗對象的數組
var markerArr;//擷取到的資料集合
var markerArrlen;//背景傳過來的資料長度
           

//調用地圖
function mapall(markerArr,markerArrlen,point,marker,info,markMan){
    for (var i = 0; i < markerArr.length; i++) {
        var p0 = markerArr[i].lng ; //
        var p1 = markerArr[i].lat ; //按照原數組的point格式将地圖點坐标的經緯度分别提出來
        var me_point = new window.BMap.Point(p0, p1); //循環生成新的地圖點
        //将gps坐标轉換成百度坐标
        markMan++;
        var me_point2 = new window.BMap.Point(p0, p1); //循環生成新的地圖點
        var imgurl ="${context}/resources/cellar/images/map_me2.png";
        var myIcon = new BMap.Icon(imgurl, new BMap.Size(18,33));
        marker[i] = new BMap.Marker(me_point2,{icon:myIcon});  // 建立标注
        map.addOverlay(marker[i]);
        info[i] = new window.BMap.InfoWindow("<p class='addresstext'>姓名：" + markerArr[i].name + "</br>位址：" + markerArr[i].address + "</br> 電話：" + markerArr[i].mobile + "</br></p >"); // 建立資訊視窗對象
        if(markMan==parseInt(markerArrlen)){
            for(var h=0;h<markerArr.length;h++){
            //标記綁訂點選事件;
                var info2 = info;
                marker[h].index=h;
                marker[h].addEventListener("click", function(){
                map.clickelen(this,info2,this.index);
            });
            }
        }
    }
}
           

10、清除之前添加資訊

map.clearOverlays();    //清除之前添加的标注等
           

11、讓自己寫的所有地圖示注顯示在最佳視野内的實作方法

map.setViewport(viewpoints);
           

這裡需要注意的是：viewpoints必須是個數組，不能是單個點。
還可能遇到的bug:viewpoints按數組添加的，但是剛進地圖沒有顯示出來得縮小地圖才能看到，可能的原因是：
map.centerAndZoom("北京市", 12); map.setViewport(points); //你的centerAndZoom函數設定成城市名了，該情況下百度會做很多後續處理，
map.setViewport(points);這句代碼是執行了的，但是map.centerAndZoom("北京市", 12); 這句代碼好像有類似回調函數之類的操作，他會覆寫map.setViewport(viewpoints);這句代碼的執行結果。