欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

vue里使用百度地图

程序员文章站 2023-10-28 15:58:10
最近公司项目里要用到百度地图，然后查阅了一些资料，并总结了下； ......

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

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

     

  2. 然后在项目里新建一个百度地图组件：地图对象生成方法写在组件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>

     

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

上一篇： 数据存贮一

下一篇： CSS实现无外边框列表效果

推荐阅读