百度地圖使用

最近要在微信增加地圖功能，嘗試了一下百度地圖。下面僅對自己用到的功能進(jìn)行了簡單整理，方便自己查閱使用。

官方文檔已經(jīng)十分詳細(xì)，更多信息可以直接查看：
概述：http://lbsyun.baidu.com/index.php?title=jspopular
示例：http://developer.baidu.com/map/jsdemo.htm
類參考：http://developer.baidu.com/map/reference/index.php

整理內(nèi)容：

一、獲取AK，引入JS文件
二、基本使用
1、創(chuàng)建地圖、添加控件、設(shè)置中心點(diǎn)與縮放比例
2、坐標(biāo)點(diǎn)
3、不同標(biāo)準(zhǔn)的坐標(biāo)點(diǎn)轉(zhuǎn)換
4、獲取兩點(diǎn)間距離
5、操作標(biāo)注(類似DOM的操作)
6、添加事件：使用addEventListener綁定
三、坐標(biāo)與路名的轉(zhuǎn)換：Geocoder
四、關(guān)鍵字查詢：LocalSearch
五、消息窗口
1、普通消息窗口
2、帶檢索功能的消息窗口
六、路線規(guī)劃：步行、駕車、公交
七、云lbs數(shù)據(jù)：LocalSearch可以搜索自定義的數(shù)據(jù)
八、其它

一、獲取AK，引入JS文件

1、注冊賬號，登陸百度地圖API控制臺 http://lbsyun.baidu.com/apiconsole/key
2、創(chuàng)建應(yīng)用(類別：服務(wù)端)，獲取AK。IP范圍按實(shí)際情況設(shè)置。
嫌麻煩就直接 0.0.0.0/0
3、引入JS文件：

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

二、基本使用：

1、創(chuàng)建地圖、添加控件、設(shè)置中心點(diǎn)與縮放比例

<div id='map'></div>

<script>
//傳入div的id值
var map = new BMap.Map("map");

//添加 地圖類型(地圖、衛(wèi)星、三維) 控件
map.addControl(new BMap.MapTypeControl());

//添加 縮放地圖的 + - 控件
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_ZOOM}));

//設(shè)置中心點(diǎn)與縮放比例
map.centerAndZoom(point, zoom);  //zoom范圍1-19，其中19的比例尺最小
</script>

2、坐標(biāo)點(diǎn)：

坐標(biāo)點(diǎn)是地圖中最為常用的一個東西，幾乎所有的內(nèi)容都需要依靠坐標(biāo)點(diǎn)來指定。
注意：此處的經(jīng)緯度需要是百度標(biāo)準(zhǔn)的。

var lng = 120;  //經(jīng)度
var lat = 30;  //緯度
var point = new BMap.Point(lng, lat);

3、不同標(biāo)準(zhǔn)的坐標(biāo)點(diǎn)轉(zhuǎn)換：

如果獲取到的坐標(biāo)不是百度標(biāo)準(zhǔn)，需要進(jìn)行轉(zhuǎn)換，否則會導(dǎo)致位置的偏移。
(比如獲取到 GPS坐標(biāo)：wgs84標(biāo)準(zhǔn) 火星坐標(biāo)：gcj02標(biāo)準(zhǔn))

//獲取到 wgs84標(biāo)準(zhǔn)的坐標(biāo)點(diǎn)
var lng_wgs84 = 120;
var lat_wgs84 = 30;
var point_wgs84 = new BMap.Point(lng_wgs84, lat_wgs84);

var convertor = new BMap.Convertor();
//第二個參數(shù)是原標(biāo)準(zhǔn)，第三個參數(shù)是新標(biāo)準(zhǔn)
//1--wgs84  5--bd09ll
convertor.translate(new Array(point_wgs84), 1, 5, function (data) {
    if (data.status === 0) {
       data.points[0];  // data.points[n] 轉(zhuǎn)換成功后的坐標(biāo)點(diǎn)
    }
});

4、獲取兩點(diǎn)間距離：

var distance = map.getDistance(point1, point2);

5、操作標(biāo)注(類似DOM的操作)：

//生成坐標(biāo)點(diǎn)
var point = new BMap.Point(lng, lat);

//根據(jù)坐標(biāo)點(diǎn) 創(chuàng)建標(biāo)注
var marker = new BMap.Marker(point);  //默認(rèn)樣式
var marker = new BMap.Marker({icon:new BMap.Icon("url", new BMap.Size(10, 10))});  //自定義圖標(biāo)

//給標(biāo)注增加文本框（類似DOM的文本節(jié)點(diǎn)）
var Label = new BMap.Label("title", {offset: new BMap.Size(0, -20)});  //文本框
marker.setLabel(Label);

//設(shè)置標(biāo)注是否可以 拖拽
marker.enableDragging();  //可拖拽
marker.disableDragging();  //不可拖拽

//添加到地圖上(類似DOM 將新節(jié)點(diǎn)加入到頁面中)
map.addOverlay(marker);

//刪除標(biāo)注：
map.removeOverlay(marker);  //刪除具體標(biāo)注
map.clearOverlays();  //刪除所有覆蓋物(除了刪除標(biāo)注，還會刪除其它內(nèi)容)

6、添加事件：使用addEventListener綁定

//地圖 點(diǎn)擊事件
map.addEventListener("click", function(e){});

//標(biāo)注 點(diǎn)擊事件
marker.addEventListener("click", function(e){
  //event.stopPropagation();  //可以防止事件冒泡
});

//標(biāo)注 拖拽(結(jié)束)事件：
marker.addEventListener("dragend", function (type, target, pixel, point) {
    //type.point  拖拽后的點(diǎn)
});

三、坐標(biāo)與路名的轉(zhuǎn)換：Geocoder

//創(chuàng)建 Geocoder對象
var geocoder = new BMap.Geocoder();

// 坐標(biāo)-->路名：
geocoder.getLocation(point, function (geocoder_result) {
    geocoder_result.address;
}

// 路名-->坐標(biāo)：
geocoder.getPoint(address, function (point) {
    if(point){  //注意：可能解析失敗
        //具體操作
    }
}, "上海市");

四、關(guān)鍵字查詢：LocalSearch

var local = new BMap.LocalSearch(map, {
    onSearchComplete: function(results){
        console.log(local.getStatus());  //返回查詢是否成功  BMAP_STATUS_SUCCESS == 0
        console.log(results.getNumPois());  //返回結(jié)果總數(shù)
        console.log(results.getCurrentNumPois());  //返回當(dāng)前頁結(jié)果總數(shù) 默認(rèn)10
        console.log(results.getPoi(0));  //返回具體第幾條數(shù)據(jù)
        console.log(results.getPoi(1));

        if (local.getStatus() == BMAP_STATUS_SUCCESS){
            //查詢成功，具體操作
            for (i = 0; i < results.getCurrentNumPois(); i++) {
                 results.getPoi(i).point;
                results.getPoi(i).title;
            }
        }
    }
});
local.setPageCapacity(100);  //設(shè)置 一次返回最大數(shù)量 最大為100
local.searchNearby('key_word', point, 1000);  //設(shè)置范圍 point的1000米內(nèi)
local.searchNearby('key_word', point);  //第三個參數(shù)為空，則為最近的

五、消息窗口：

1、普通消息窗口：

//其中content完全可以寫入 html內(nèi)容 比如 button等
var infoWindow = new BMap.InfoWindow("content", {width: 200, height: 200});
map.openInfoWindow(infoWindow, point);  //在point位置顯示出來

2、帶檢索功能的消息窗口(功能多點(diǎn))：需要多引入文件

<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet"  />

var searchInfoWindow = new BMapLib.SearchInfoWindow(map, 'content', {
    title  : "title",
    width  : 200,
    height : 20,
    panel  : "panel",  //檢索結(jié)果面板 div 的 id
    enableAutoPan : true,     //自動平移
    searchTypes : [  //設(shè)置功能內(nèi)容
        BMAPLIB_TAB_SEARCH,    //周邊檢索
        BMAPLIB_TAB_TO_HERE,   //到這里去
        BMAPLIB_TAB_FROM_HERE  //從這里出發(fā)
    ]
});
searchInfoWindow.open(marker/point);  //傳入顯示的位置：marker或point

六、路線規(guī)劃：步行、駕車、公交

//在下一次的查詢前，手動清除上一次的路線(覆蓋物)
map.clearOverlays();  //或者自定義清除方式

//步行路線
var walking_route = new BMap.WalkingRoute(map, {
    renderOptions: {
        map: map,
        panel: "map_route",  //路線 文字版顯示位置：div的id值
        autoViewport: true
    }
});
walking_route.search(point_departure, point_destination);  //起點(diǎn), 終點(diǎn)

//駕車路線
//BMAP_DRIVING_POLICY_LEAST_TIME  0  最少時間
//BMAP_DRIVING_POLICY_LEAST_DISTANCE  1  最短距離
//BMAP_DRIVING_POLICY_AVOID_HIGHWAYS  2  避開高速
var driving = new BMap.DrivingRoute(map, {
    renderOptions: {
        map: map,
        panel: "map_route",  //路線 文字版顯示位置：div的id值
        autoViewport: true
    }, policy: 0  //規(guī)則
});
driving.search(point_departure, point_destination);  //起點(diǎn), 終點(diǎn)

//公交路線
//BMAP_TRANSIT_POLICY_LEAST_TIME  0  最少時間
//BMAP_TRANSIT_POLICY_LEAST_TRANSFER  2  最少換乘
//BMAP_TRANSIT_POLICY_LEAST_WALKING  3  最少步行
//BMAP_TRANSIT_POLICY_AVOID_SUBWAYS  4  不乘地鐵
var transit = new BMap.TransitRoute(map, {
    renderOptions: {
        map: map,
        panel: "map_route"  //路線 文字版顯示位置：div的id值
    }, policy: 0  //規(guī)則
});
transit.search(point_departure, point_destination);  //起點(diǎn), 終點(diǎn)


//可以單獨(dú)設(shè)置規(guī)則：比如在下拉框中進(jìn)行選擇：
driving.setPolicy(n);
transit.setPolicy(n);

七、云lbs數(shù)據(jù)：LocalSearch可以搜索自定義的數(shù)據(jù)

1、添加數(shù)據(jù)：
API控制面板--數(shù)據(jù)管理平臺：http://lbsyun.baidu.com/data/mydata
創(chuàng)建表，編輯具體需要的坐標(biāo)點(diǎn)信息
2、需要選擇：是否將數(shù)據(jù)發(fā)布至云檢索
3、根據(jù)表ID進(jìn)行搜索

localsearch.searchNearby('keyword', point, 999, {customData: {geotableId: 123456}});

八、其它：

1、因?yàn)橛迷谖⑿哦耍⑿臞S來定位，所以上面沒有涉及百度地圖的定位。
2、去除百度地圖的logo圖標(biāo)：隱藏圖標(biāo)的div

.anchorBL {
    display: none;
}

3、使用Geocoder類進(jìn)行坐標(biāo)與路名的轉(zhuǎn)換，只能取得具體的路名(xx路xx號)，而沒有地點(diǎn)名(xx大樓)。
如果需要后者，得用LocalSearch。
4、標(biāo)注的跳動動畫，在移動端嘗試無效果。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容