最近公司項目里要用到百度地圖，然後查閱了一些資料，並總結了下； ...
最近公司項目里要用到百度地圖，然後查閱了一些資料，並總結了下；
- 首先呢，由於本公司使用的是百度離線地圖，那麼我們首先需要將百度地圖離線包放置static靜態文件目錄下（我的離線地圖包名是“baidu_new_t”），然後在首頁入口文件index.html里head標簽里引入百度地圖需要的js；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>mo</title> 7 <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你申請的秘鑰"></script> -->//線上 8 <script type="text/javascript" src="/static/baidu_new_t/js/apiv.2.0-wy.js"></script> 9 </head> 10 <body> 11 <div id="app"></div> 12 <!-- built files will be auto injected --> 13 </body> 14 <script type="text/javascript"> 15 16 document.body.onmousedown = function(){ 17 return false; 18 } 19 </script> 20 </html>
- 然後在項目里新建一個百度地圖組件：地圖對象生成方法寫在組件mounted方法裡面，在需要的地方導入此組件即可使用；
1 <template> 2 <div id="allmap"></div> 3 </template> 4 <script> 5 //import BMap from 'BMap' 6 export default { 7 data(){ 8 return { 9 10 } 11 }, 12 mounted(){ 13 console.log(123123) 14 if(BMap){ 15 var map =new BMap.Map("allmap"); 16 var point =new BMap.Point(116.404, 39.915); 17 map.centerAndZoom(point,15); 18 map.enableScrollWheelZoom();//啟用滾輪放大縮小 19 var marker =new BMap.Marker(point); 20 map.addOverlay(marker); 21 } 22 } 23 } 24 </script> 25 <style> 26 #allmap { 27 width: 200px; 28 height: 200px; 29 } 30 </style>
- 註意點
- 本人使用的是離線地圖，如果想要使用線上地圖，再第一步驟里引入線上js即可；
- 如果使用vue-cli 3.x版本，需要將百度地圖離線包放在public文件夾下；
- 需要將script標簽寫在body標簽之前，否則mounted事件裡面會存在找不到bmap
