百度地圖-製作靜態圖片包含：標籤、折線圖和標記詳情 - 百度地圖,百度地圖api Awbeci 博客

前言

最近公司需要製作地圖截圖功能，一開始準備使用html2canvas但是發現生成的圖片中地圖是空白也不知道咋回事，然後發現百度地圖有現成的生成靜態圖片的辦法，而且可以生成折線圖、標記、標籤等還能控制中心點，試了一下挺好的，分享給大家。

操作

這個是百度地圖官網生成靜態圖片的api地址百度地圖靜態圖API，裏面有demo，但是鏈接有的有問題，下面會講如何解決。

1、顯示圖片

https://api.map.baidu.com/staticimage/v2
?ak=your-ak
&center=116.403874,39.914888
&width=300
&height=200
&zoom=11

上面的鏈接設置了ak、中心點center、寬度width、高度height，縮放zoom(高清圖範圍[3, 18]；低清圖範圍[3,19])

2、顯示帶有標記的圖片

https://api.map.baidu.com/staticimage/v2
?ak=your-ak
&center=116.403874,39.914889
&width=400
&height=300
&zoom=11
&markers=116.288891,40.004261
|116.487812,40.017524
|116.525756,39.967111
|116.536105,39.872374
|116.442968,39.797022
|116.270494,39.851993
|116.275093,39.935251
|116.383177,39.923743
&markerStyles=l,A
|m,B
|l,C
|l,D
|m,E
|,
|l,G
|m,H

上面的鏈接中的ak、center、width、height、zoom上面已經説過了，我們看看多出來的markers和markerStyle屬性

markers：表示標記點，由經度和緯度組成格式是：經度,緯度，如果有多個標記則使用'|'分割。
markerStyles：表示的是標記點樣式，從api文檔可以看到有：size,label,color,url組成，以逗號分割，如果有多個則要跟上面的markers一一對應也要使用|分割。

3、顯示帶有標籤的圖片

http://api.map.baidu.com/staticimage/v2
?ak=your-ak
&center=116.403874,39.914889
&width=500
&height=500
&zoom=11
&labels=116.487812,40.017524
|116.442968,39.797022
|116.275093,39.935251
|116.28377,39.903743
&labelStyles=測試標記1,1,32,0x990099,0xff00,1
|測試標記2,1,14,0x000000,0x996600,1
|測試標記3,1,14,0xff6633,0x996600,1
|測試標記4,1,32,0x000000,0xffffff,1

上面的鏈接labels表示標籤名，如果有多個則使用|分割。
labelStyles表示的是labels的樣式，從api文檔可以看到有：content,border,fontSize,fontColor、bgColor、fontWeight組成，以逗號分割，如果有多個則要跟上面的labels一一對應也要使用|分割。

4、顯示帶有折線的圖片

https://api.map.baidu.com/staticimage/v2
?ak=your-ak
&center=116.403874,39.914888
&width=500
&height=500
&zoom=11
&paths=116.288891,40.004261;116.487812,40.017524;116.525756,39.967111;116.536105,39.872373
|116.442968,39.797022;116.270494,39.851993;116.275093,39.935251;116.383177,39.923743
&pathStyles=0xff0000,5,0.9,0xffffff

上面的鏈接paths表示折線圖的路徑，格式為：經度,緯度，如果有多個則使用;組成，如果有多個折線圖則使用|分割
pathStyles表示折線圖的樣式，從api文檔可以看到有：color,weight,opacity,fillColor組成，以逗號分割，如果有多個則要跟上面的paths一一對應也要使用|分割。

鏈接問題

鏈接：

https://api.map.baidu.com/staticimage/v2?ak=your-ak&mcode=666666&center=116.403874,39.914888&width=300&height=200&zoom=11

分析：ak有問題，使用自己的ak即可
解決：替換成自己的ak

鏈接：

https://api.map.baidu.com/staticimage/v2?ak=your-ak¢er=116.403874,39.914888&width=500&height=500&zoom=11&paths=116.288891,40.004261;116.487812,40.017524;116.525756,39.967111;116.536105,39.872373|116.442968,39.797022;116.270494,39.851993;116.275093,39.935251;116.383177,39.923743&pathStyles=0xff0000,5,0.9,0xffffff```

分析：¢er有問題
解決：替換成¢er即可