vue如何使用百度地图

一、引入百度地图
        1.public文件夹下放置index.html文件
        2.在html文件中引入网址，

二、在config.js文件中添加externals.BMap配置，与entry平级，内容如下

三、设置地图区域 必须设置div宽度和高度，否则也不能正常显示。

四、设置点击事件百度链接跳转

data属性里面设置跳转链接地址

下面是地图方法和属性

 methods: {
//创建和初始化地图函数：
    initMap() {
      this.createMap(); //创建地图
      this.setMapEvent(); //设置地图事件
      this.addMapControl(); //向地图添加控件
      this.addMapOverlay(); //向地图添加覆盖物
    },
    createMap() {
      map = new BMap.Map("mapdata");
      console.log(BMap, " map");

      map.centerAndZoom(new BMap.Point(116.312014, 39.832113), 18);
    },

setMapEvent() {
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom();
    },
    addClickHandler(target, window) {
      target.addEventListener("click", function () {
        target.openInfoWindow(window);
      });
    },
addMapOverlay() {
      var markers = [
        {
          content: "我的备注",
          title: "xxx公司名称",
          imageOffset: { width: -46, height: -21 },
          position: { lat: 39.832902, lng: 116.310658 },
        },
      ];
      for (var index = 0; index < markers.length; index++) {
        var point = new BMap.Point(
          markers[index].position.lng,
          markers[index].position.lat
        );
        var marker = new BMap.Marker(point, {
          icon: new BMap.Icon(
            "http://api.map.baidu.com/lbsapi/createmap/images/icon.png",
            new BMap.Size(20, 25),
            {
              imageOffset: new BMap.Size(
                markers[index].imageOffset.width,
                markers[index].imageOffset.height
              ),
            }
          ),
        });
        var label = new BMap.Label(markers[index].title, {
          offset: new BMap.Size(25, 5),
        });
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false,
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
        marker.setLabel(label);
        this.addClickHandler(marker, infoWindow);
        map.addOverlay(marker);
      }
    },
 //向地图添加控件
    addMapControl() {
      var scaleControl = new BMap.ScaleControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT,
      });
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE,
      });
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        isOpen: true,
      });
      map.addControl(overviewControl);
    },

}

下面是地图渲染效果：

注意地图显示不出来有几种情况：

        script 引用网址标签不能太靠下。 
        核查API密钥，确保密钥正确无误。
        使用Vue的mounted钩子确保DOM元素已经加载完毕。