引用百度地图插件

1、在index.html页面添加插件地址

image.png
image.png

链接：

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=X4Mz3CV5EKxQGo0OTu4X5j2DD0RkCj2F"></script>

2、在引用的页面写标签

给一个空标签即可

 <div id="mapContainer"></div>

3、js创建地图

 export default {
        data() {
            return {
                map: [
                    {
                        detail: '深圳市宝安区西乡',
                        city: '深圳'
                    }
                ]
            }
        },
        methods: {
            bdMap(detail, city) {
                //创建地图
                let map = new BMap.Map("mapContainer");
                let point = new BMap.Point((116.404, 39.915), 11);
                map.centerAndZoom(point, 20); // 创建点坐标
                map.addControl(new BMap.NavigationControl());
                map.enableScrollWheelZoom(true);//允许鼠标滚动缩放
                // 初始化地图， 设置中心点坐标和地图级别
                // 创建地址解析器实例
                var myGeo = new BMap.Geocoder();
                // 将地址解析结果显示在地图上，并调整地图视野
                myGeo.getPoint(detail, function(point){
                    if (point) {
                        map.centerAndZoom(point, 18);
                        map.addOverlay(new BMap.Marker(point));
                    }
                },
                city);
            },
            handleTab(tab) {
                this.bdMap(tab.name, tab.label);
            }
        },
        mounted() {
            this.bdMap(this.map[0].detail, this.map[0].city);
        }
    };

image.png