vue里使用百度地图

2019-03-10 11:54:00来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

  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

原文链接:https://www.cnblogs.com/yecy1992/p/10500058.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:async &amp; await &amp; Promise

下一篇:【转载】window.open被浏览器拦截的解决办法