百度地圖API圖示、文字、圖例與連線
百度地圖開放平臺功能強大，使用簡單，為地圖的自定義提供了非常方便的途徑！
本文以繪製一張全國機器輻射圖為例記錄其基本使用方法，效果如下圖：
圖中包括了帶圖示和文字的標註，連線以及圖例。
1.關於座標
說到地圖，不得不說座標。
我以為，GPS獲取經緯度之後，把經緯度丟給地圖就可以了。但那真的是自以為。
1.1 座標系
來看看實際情況，以下是百度開發文件裡的描述：
目前國內主要有以下三種座標系：
WGS84：為一種大地座標系，也是目前廣泛使用的GPS全球衛星定位系統使用的座標系。
GCJ02：又稱火星座標系，是由中國國家測繪局制訂的地理資訊系統的座標系統。由WGS84座標系經加密後的座標系。
BD09：為百度座標系，在GCJ02座標系基礎上再次加密。其中bd09ll表示百度經緯度座標，bd09mc表示百度墨卡托米制座標。
非中國地區地圖，服務座標統一使用WGS84座標。
百度對外介面的座標系為BD09座標系，並不是GPS採集的真實經緯度，在使用百度地圖JavaScript API服務前，需先將非百度座標通過座標轉換介面轉換成百度座標。
通過 GPS 獲取的為 WGS84，在百度地圖上使用前要轉換為 BD09，百度提供了相應的 api 進行座標轉換，文件地址：http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=5&ak=s1eeiQEfDF0WZfdfvLgHbG2Ru49UNCrn 返回結果： { status : 0, result : [ { x : 114.23074871003, y : 29.579084787993 } ] }
具體還可參考下這篇文章：https://www.cnblogs.com/yesicoo/p/4668642.html
1.2 座標拾取器
如果座標是靜態的，或測試用，可以直接通過百度地圖提供的“座標拾取器”工具來獲取經緯度。
工具地址：http://api.map.baidu.com/lbsapi/getpoint/index.html
點哪就獲取哪的座標，此座標不用再轉換，複製過來即可以使用。
2. 開始應用
2.1 準備圖示
有好些站點可以下載圖示，如：https://easyicon.net，可以獲取一些圖示檔案。至於商用的要求則要看看站點說明。
如下圖，這裡準備總部與機器的圖示下載儲存為 head.png、machine.png。
2.2 開啟百度地圖
地圖API的使用需要先申請一個 ak，為了體驗方便，這裡已經申請了一個可以直接使用的 key，在頁面中可直接加入以下引用。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=s1eeiQEfDF0WZfdfvLgHbG2Ru49UNCrn"></script>使用以下語句，定義全域性的地圖物件
// 百度地圖 API 功能物件
var map = null;
if (BMap) {
map = new BMap.Map("allmap"); // id=allmap 的容器內顯示
map.enableScrollWheelZoom();
}2.2 標註：圖示與文字
標註使用 BMap.Marker，可以為其指定 Icon與Label。為了方便後續使用，本例定義以下函式，指定位置、圖示（本例中可用已經下載的圖示 head，machine）以及文字即可。
/**
* 指定經緯度，圖示，標註文字
* 在地圖上新增標註
* longitude 經度
* latitude 緯度
* icon 圖示
* text 標註文字
**/
function addMarker(longitude, latitude, icon, text) {
if (!map) return;
var point = new BMap.Point(longitude, latitude);
var myIcon = new BMap.Icon(icon + ".png", new BMap.Size(32, 32));
// 指定位置及標註的圖示
var marker = new BMap.Marker(point, { icon: myIcon }); // 建立標註
if(text){
var label = new BMap.Label(text, { offset: new BMap.Size(32, -16) });
marker.setLabel(label);
}
// 新增到地圖上
map.addOverlay(marker);
}2.3 連線
連線實際使用的是繪製多邊形的功能，只是當只指定了兩個點時，就是一根線。同樣，這裡定義一個函式以方便直接呼叫。
/**
* 指定起止經緯度，繪製連線線
*
* longitudeFrom 經度
* latitudeFrom 緯度
* longitudeTo 經度
* latitudeTo 緯度
**/
function addLine(longitudeFrom, latitudeFrom, longitudeTo, latitudeTo) {
if (!map) return;
var pointFrom = new BMap.Point(longitudeFrom, latitudeFrom);
var pointTo = new BMap.Point(longitudeTo, latitudeTo);
// 可以指定多點連線，此處只考慮兩點
var line = new BMap.Polyline([pointFrom, pointTo], { strokeWeight:1, strokeOpacity:0.5, strokeColor:"red" });
// 新增到地圖上
map.addOverlay(line);
}2.4 圖例
圖例需要以地圖定義的控制元件方式來新增，在控制元件的 initialize 事件中完成 DOM 元素的生成即可，為了體現過程本身，以下函式把 DOM 的html文字作為引數，由外部靈活定義。
/**
* 新增圖例
* 實質就是在地圖上新增自己的頁面元素
*
* html 網頁元素
**/
function addLegend(html){
var LegendControl = function () {
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
}
LegendControl.prototype = new BMap.Control();
LegendControl.prototype.initialize = function (map) {
var le = $(html)[0];
map.getContainer().appendChild(le);
return le;
};
var legendCtrl = new LegendControl();
map.addControl(legendCtrl);
} 2.5 綜合
有了以上函式，綜合起來就流程清晰了。以下座標，均通過座標拾取器獲取。
// 機器類：經度，緯度，名稱
function Machine(longitude, latitude, name){
this.longitude = longitude;
this.latitude = latitude;
this.name = name;
}
// 確定地圖的中心位置與縮放級別
var center = new BMap.Point(110.423997,31.40979);
map.centerAndZoom(center, 6); // 級別 6，跨省檢視
// 新增圖例，自由寫 html
addLegend("<div style='font-size:12px; color:gray; width:140px; padding:5px; background:white; text-align:center; border:solid 1px gray;'>總部：<img src='head.png' style='width:16px; vertical-align:middle;' /> 裝置：<img src='machine.png' style='width:16px; vertical-align:middle;' /></div>");
// 總部位置
var head = { longitude : 112.918702343957, latitude : 28.30070516 };
addMarker(head.longitude, head.latitude, 'head', '總部');
// 所有機器位置
var machineList = [
new Machine(114.876143,38.113315,'石家莊'),
new Machine(112.521289,37.822014,'太原'),
new Machine(108.989008,34.328175,'西安'),
new Machine(117.230997,31.881961,'合肥'),
new Machine(103.984944,30.553819,'成都'),
new Machine(108.400295,22.862517,'南寧'),
new Machine(113.257181,23.169067,'廣州'),
new Machine(120.174565,30.298715,'杭州'),
new Machine(102.881106,24.959705,'昆明')
];
// 新增所有機器並連線
for(var i=0; i<machineList.length; i++){
addMarker(machineList[i].longitude, machineList[i].latitude, 'machine', machineList[i].name);
addLine(head.longitude, head.latitude, machineList[i].longitude, machineList[i].latitude);
} 3. 結語
本文完整程式碼可從此處下載：
https://github.com/triplestudio/helloworld/blob/master/baidu_map_demo.html
在此基礎上，可以根據需要進一步擴充套件功能，具體參考百度地圖開放平臺開發文件：
http://lbsyun.baidu.com/