百度地圖開放平臺功能強(qiáng)大，使用簡單，為地圖的自定義提供了非常方便的途徑！

本文以繪制一張全國機(jī)器輻射圖為例記錄其基本使用方法，效果如下圖：

圖中包括了帶圖標(biāo)和文本的標(biāo)注，連線以及圖例。

1.關(guān)于坐標(biāo)

說到地圖，不得不說坐標(biāo)。

我以為，GPS獲取經(jīng)緯度之后，把經(jīng)緯度丟給地圖就可以了。但那真的是自以為。

1.1 坐標(biāo)系

來看看實(shí)際情況，以下是百度開發(fā)文檔里的描述：

目前國內(nèi)主要有以下三種坐標(biāo)系：

WGS84：為一種大地坐標(biāo)系，也是目前廣泛使用的GPS全球衛(wèi)星定位系統(tǒng)使用的坐標(biāo)系。

GCJ02：又稱火星坐標(biāo)系，是由中國國家測繪局制訂的地理信息系統(tǒng)的坐標(biāo)系統(tǒng)。由WGS84坐標(biāo)系經(jīng)加密后的坐標(biāo)系。

BD09：為百度坐標(biāo)系，在GCJ02坐標(biāo)系基礎(chǔ)上再次加密。其中bd09ll表示百度經(jīng)緯度坐標(biāo)，bd09mc表示百度墨卡托米制坐標(biāo)。

非中國地區(qū)地圖，服務(wù)坐標(biāo)統(tǒng)一使用WGS84坐標(biāo)。

百度對外接口的坐標(biāo)系為BD09坐標(biāo)系，并不是GPS采集的真實(shí)經(jīng)緯度，在使用百度地圖JavaScript API服務(wù)前，需先將非百度坐標(biāo)通過坐標(biāo)轉(zhuǎn)換接口轉(zhuǎn)換成百度坐標(biāo)。

通過 GPS 獲取的為 WGS84，在百度地圖上使用前要轉(zhuǎn)換為 BD09，百度提供了相應(yīng)的 api 進(jìn)行坐標(biāo)轉(zhuǎn)換，文檔地址：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

返回結(jié)果：
{
status : 0,
result :
[
{
x : 114.23074871003,
y : 29.579084787993
}
]
}

具體還可參考下這篇文章：https://www.cnblogs.com/yesicoo/p/4668642.html

1.2 坐標(biāo)拾取器

如果坐標(biāo)是靜態(tài)的，或測試用，可以直接通過百度地圖提供的“坐標(biāo)拾取器”工具來獲取經(jīng)緯度。

工具地址：http://api.map.baidu.com/lbsapi/getpoint/index.html

點(diǎn)哪就獲取哪的坐標(biāo)，此坐標(biāo)不用再轉(zhuǎn)換，復(fù)制過來即可以使用。

2. 開始應(yīng)用

2.1 準(zhǔn)備圖標(biāo)

有好些站點(diǎn)可以下載圖標(biāo)，如：https://easyicon.net，可以獲取一些圖標(biāo)文件。至于商用的要求則要看看站點(diǎn)說明。

如下圖，這里準(zhǔn)備總部與機(jī)器的圖標(biāo)下載保存為 head.png、machine.png。

2.2 開啟百度地圖

地圖API的使用需要先申請一個 ak，為了體驗(yàn)方便，這里已經(jīng)申請了一個可以直接使用的 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 的容器內(nèi)顯示
map.enableScrollWheelZoom();
}

2.2 標(biāo)注：圖標(biāo)與文本

標(biāo)注使用 BMap.Marker，可以為其指定 Icon與Label。為了方便后續(xù)使用，本例定義以下函數(shù)，指定位置、圖標(biāo)(本例中可用已經(jīng)下載的圖標(biāo) head，machine)以及文本即可。

/**
* 指定經(jīng)緯度，圖標(biāo)，標(biāo)注文本
* 在地圖上添加標(biāo)注
* longitude 經(jīng)度
* latitude 緯度
* icon 圖標(biāo)
* text 標(biāo)注文本
**/
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));
// 指定位置及標(biāo)注的圖標(biāo)
var marker = new BMap.Marker(point, { icon: myIcon }); // 創(chuàng)建標(biāo)注
if(text){
var label = new BMap.Label(text, { offset: new BMap.Size(32, -16) });
marker.setLabel(label);
}
// 添加到地圖上
map.addOverlay(marker);
}

2.3 連線

連線實(shí)際使用的是繪制多邊形的功能，只是當(dāng)只指定了兩個點(diǎn)時，就是一根線。同樣，這里定義一個函數(shù)以方便直接調(diào)用。

/**
* 指定起止經(jīng)緯度，繪制連接線
*
* longitudeFrom 經(jīng)度
* latitudeFrom 緯度
* longitudeTo 經(jīng)度
* latitudeTo 緯度
**/
function addLine(longitudeFrom, latitudeFrom, longitudeTo, latitudeTo) {
if (!map) return;

var pointFrom = new BMap.Point(longitudeFrom, latitudeFrom);
var pointTo = new BMap.Point(longitudeTo, latitudeTo);
// 可以指定多點(diǎn)連接，此處只考慮兩點(diǎn)
var line = new BMap.Polyline([pointFrom, pointTo], { strokeWeight:1, strokeOpacity:0.5, strokeColor:"red" });
// 添加到地圖上
map.addOverlay(line);
}

2.4 圖例

圖例需要以地圖定義的控件方式來添加，在控件的 initialize 事件中完成 DOM 元素的生成即可，為了體現(xiàn)過程本身，以下函數(shù)把 DOM 的html文本作為參數(shù)，由外部靈活定義。

/**
* 添加圖例
* 實(shí)質(zhì)就是在地圖上添加自己的頁面元素
*
* html 網(wǎng)頁元素
**/
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 綜合

有了以上函數(shù)，綜合起來就流程清晰了。以下坐標(biāo)，均通過坐標(biāo)拾取器獲取。

// 機(jī)器類：經(jīng)度，緯度，名稱
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("總部： 設(shè)備：");

// 總部位置
var head = { longitude : 112.918702343957, latitude : 28.30070516 };
addMarker(head.longitude, head.latitude, 'head', '總部');

// 所有機(jī)器位置
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,'昆明')
];

// 添加所有機(jī)器并連線
for(var i=0; i addMarker(machineList[i].longitude, machineList[i].latitude, 'machine', machineList[i].name);
addLine(head.longitude, head.latitude, machineList[i].longitude, machineList[i].latitude);
}

3. 結(jié)語

本文完整代碼可從此處下載：

https://github.com/triplestudio/helloworld/blob/master/baidu_map_demo.html

在此基礎(chǔ)上，可以根據(jù)需要進(jìn)一步擴(kuò)展功能，具體參考百度地圖開放平臺開發(fā)文檔：

http://lbsyun.baidu.com/

關(guān)注“時間維度”，和時間作朋友！

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的sns.distplot图例标注怎么添加_百度地图API图标、文本、图例与连线的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。