vue里使用百度地图

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

1. 首先呢，由于本公司使用的是百度离线地图，那么我们首先需要将百度地图离线包放置static静态文件目录下（我的离线地图包名是“baidu_new_t”），然后在首页入口文件index.html里head标签里引入百度地图需要的js；

    <!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1.0">
            <title>mo</title>
            <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你申请的秘钥"></script> -->//在线
            <script type="text/javascript" src="/static/baidu_new_t/js/apiv.2.0-wy.js"></script>
         </head>
        <body>
          <div id="app"></div>
          <!-- built files will be auto injected -->
       </body>
       <script type="text/javascript">
   
            document.body.onmousedown = function(){
                return false;
            }
       </script>
     </html>

2. 然后在项目里新建一个百度地图组件：地图对象生成方法写在组件mounted方法里面，在需要的地方导入此组件即可使用；

    <template>
        <div id="allmap"></div>
    </template>
    <script>
    //import BMap from 'BMap'
    export default {
        data(){
            return {
   
            }
        },
        mounted(){
           console.log(123123)
            if(BMap){
              var map =new BMap.Map("allmap");
              var point =new BMap.Point(116.404, 39.915);
              map.centerAndZoom(point,15);
              map.enableScrollWheelZoom();//启用滚轮放大缩小
              var marker =new BMap.Marker(point);
                map.addOverlay(marker);
            }
        }
    }
    </script>
    <style>
        #allmap {
            width: 200px;
            height: 200px;
        }
    </style>

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