企業(yè)官網(wǎng)上需要用到地圖應(yīng)用，這里對百度地圖API的使用做點(diǎn)筆記，好記性不如爛筆頭。

實(shí)現(xiàn)地圖應(yīng)用的流程如下：

1、獲取密鑰；教程網(wǎng)址?https://jingyan.baidu.com/article/363872eccda8286e4aa16f4e.html

2、在html的head頭部引入百度地圖的API，如

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

3、根據(jù)API文檔創(chuàng)建容器、繪制地圖、添加各種控件。詳細(xì)如下代碼

<div id="mapContainer" style="width:500px;height:400px;border:1px solid gray;"></div> <script> function initialize() { //創(chuàng)建地圖實(shí)例 var map = new BMap.Map('mapContainer'); //地圖渲染到了id="mapContainer"的DOM元素上 //創(chuàng)建一個(gè)坐標(biāo) var point =new BMap.Point(113.946567,22.531604); //地圖初始化，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別 map.centerAndZoom(point,14); var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25)); //替換掉標(biāo)注的圖片 var marker = new BMap.Marker(point,{icon: myIcon}); 　　　　　 // 創(chuàng)建標(biāo)注 map.addOverlay(marker); // 將標(biāo)注添加到地圖中 map.enableScrollWheelZoom(); // 啟用滾輪放大縮小。 //map.enableKeyboard(); // 啟用鍵盤操作。 map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件 map.addControl(new BMap.ScaleControl({ anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角 offset : new BMap.Size(290,10) //進(jìn)一步控制縮放按鈕的水平豎直偏移量 })); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl({isOpen:true})); //添加縮略地圖控件 map.addControl(new BMap.MapTypeControl( { anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角 offset : new BMap.Size(160,10) //進(jìn)一步控制縮放按鈕的水平豎直偏移量 })); //地圖類型 var label = new BMap.Label("深圳賽動(dòng)生物自動(dòng)化有限公司",{offset:new BMap.Size(15,-20)}); marker.setLabel(label); //添加公司label }window.onload = initialize; </script>

開發(fā)中遇到的一些問題的記錄：

1、如何獲取目標(biāo)點(diǎn)的坐標(biāo)點(diǎn)（地圖中心點(diǎn)，比如公司位置坐標(biāo)）？？百度地圖提供了一個(gè)坐標(biāo)拾取器工具界面，可以參考使用教程獲取：https://jingyan.baidu.com/article/f96699bbafdccc894e3c1b8b.html

2、默認(rèn)是沒有鼠標(biāo)滾動(dòng)縮放大小、平移縮放、縮略地圖、比例尺、標(biāo)注、三維地圖類型等功能，需要如上述代碼分別添加。

3、如何隱藏左下角地圖的版權(quán)信息？？如下

<style>.anchorBL{display:none;}</style>

4、在標(biāo)注旁顯示公司名的標(biāo)注，更換標(biāo)注的圖標(biāo)

var label = new BMap.Label("深圳賽動(dòng)生物自動(dòng)化有限公司",{offset:new BMap.Size(15,-20)}); marker.setLabel(label); //添加公司labelvar myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25)); var marker2 = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker2);

5、右下角的縮略地圖是折疊的，怎么保持常開？？
?

map.addControl(new BMap.OverviewMapControl({isOpen:true})); //添加縮略地圖控件

6、百度離線地圖開發(fā)待完善？？

?

百度地圖API使用官網(wǎng)：http://lbsyun.baidu.com/index.php?title=jspopular/guide/maplayer

網(wǎng)絡(luò)教程參考網(wǎng)址：https://www.cnblogs.com/yfsmooth/p/4695831.html

?

這里附加一個(gè)迅速地圖實(shí)現(xiàn)的工具：http://api.map.baidu.com/lbsapi/creatmap/index.html?可以直接配置參數(shù)獲取代碼

總結(jié)

以上是生活随笔為你收集整理的百度地图API实现地图应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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