Vue如何引入百度地图（解决方案）

第一步去百度地图上申请AK(subway | 百度地图API SDK)

1、

2、

​​​​​​​第二步npm下载一个百度地图包

npm i vue-baidu-map --save

第三步在main.js中引入

import BaiduMap from 'vue-baidu-map';

Vue.use(BaiduMap, {
//* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */百度申请密钥的地址
//百度地图需要用户创建应用，然后会给这个应用申请一个密钥（访问应用AK），有了这个AK才能在项目中引用地图。
  ak: '填写密钥'
})

第四步在页面中使用

<div class="dt" id='container'>
            <baidu-map @ready="mapHandle" style="width:100%;height:200px" :scroll-wheel-zoom='true' ></baidu-map>
</div>

第五步在script中定义

  mapHandle({
                          BMap,
                          map
                      }) {
                var point = new BMap.Point(116.331398, 39.897445);
                // map.centerAndZoom(point, 13)
                map.centerAndZoom(point, 12);
                // 创建地址解析器实例
                var myGeo = new BMap.Geocoder();
                // 将地址解析结果显示在地图上，并调整地图视野
                //定位到'章里集'
                myGeo.getPoint('章里集', function(point) {
                    if (point) {
                        map.centerAndZoom(point, 16);
                        map.addOverlay(new BMap.Marker(point, {
                            title: '邯郸'
                        }));
                    } else {
                        console.log('您选择的地址没有解析到结果！');
                    }
                },'全国')
            }

完毕!