vue里使用百度地图

最近公司项目里要用到百度地图，然后查阅了一些资料，并总结了下；

首先呢，由于本公司使用的是百度离线地图，那么我们首先需要将百度地图离线包放置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>

注意点
1. 本人使用的是离线地图，如果想要使用在线地图，再第一步骤里引入在线js即可；
2. 如果使用vue-cli 3.x版本，需要将百度地图离线包放在public文件夹下；
3. 需要将script标签写在body标签之前，否则mounted事件里面会存在找不到bmap

vue里使用百度地图

猜你喜欢