企業官網上需要用到地圖應用，這里對百度地圖API的使用做點筆記，好記性不如爛筆頭。

實現地圖應用的流程如下：

1、獲取密鑰；教程網址?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、根據API文檔創建容器、繪制地圖、添加各種控件。詳細如下代碼

<div id="mapContainer" style="width:500px;height:400px;border:1px solid gray;"></div> <script> function initialize() { //創建地圖實例 var map = new BMap.Map('mapContainer'); //地圖渲染到了id="mapContainer"的DOM元素上 //創建一個坐標 var point =new BMap.Point(113.946567,22.531604); //地圖初始化，設置中心點坐標和地圖級別 map.centerAndZoom(point,14); var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25)); //替換掉標注的圖片 var marker = new BMap.Marker(point,{icon: myIcon}); 　　　　　 // 創建標注 map.addOverlay(marker); // 將標注添加到地圖中 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) //進一步控制縮放按鈕的水平豎直偏移量 })); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl({isOpen:true})); //添加縮略地圖控件 map.addControl(new BMap.MapTypeControl( { anchor : BMAP_ANCHOR_BOTTOM_RIGHT, //右下角 offset : new BMap.Size(160,10) //進一步控制縮放按鈕的水平豎直偏移量 })); //地圖類型 var label = new BMap.Label("深圳賽動生物自動化有限公司",{offset:new BMap.Size(15,-20)}); marker.setLabel(label); //添加公司label }window.onload = initialize; </script>

開發中遇到的一些問題的記錄：

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

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

3、如何隱藏左下角地圖的版權信息？？如下

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

4、在標注旁顯示公司名的標注，更換標注的圖標

var label = new BMap.Label("深圳賽動生物自動化有限公司",{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、百度離線地圖開發待完善？？

?

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

網絡教程參考網址：https://www.cnblogs.com/yfsmooth/p/4695831.html

?

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。