vue应用百度地图

vue应用百度地图

1.npm i vue-baidu-map

2.config中配置

   externals: {
        Vue: 'Vue',
        VueRouter: 'VueRouter',
        Vuex: 'Vuex',
        BMap: 'BMap',
        _BMap: '_BMap'
    },

  <baidu-map
        v-if="isShowMap"
        :center="GPScenter"
        :zoom="zoom"
        @ready="handler"
        ak="xxxxxx"
      >

 handler({ BMap, map }) {
      let v = this;
      console.log(BMap, map);
      console.log("map", map);
      v.BMap = BMap;
      v.map = map;
      let mapcenter = map.getCenter();
      // this.GPScenter.lng = 116.404
      // this.GPScenter.lat = 39.915
      this.zoom = 13;
      // map.addEventListener("click", v.showInfo);
      // map.enableScrollWheelZoom() //启用滚轮放大缩小，默认禁用
      // map.enableContinuousZoom() //启用地图惯性拖拽，默认禁用
      //map.enableDragging() // 可拖拽
      //map.addEventListener('dragend', v.dragendFun(mapcenter))
      //console.log('mapcenters1', mapcenter)
      ///*
      map.addEventListener("dragend", function(mapcenters) {
        console.log("mapcenters2", mapcenters.point);
        v.GPScenter.lng = map.getCenter().lng;
        v.GPScenter.lat = map.getCenter().lat;
        v.GPScenterlat = map.getCenter().lat + "";
        v.GPScenterlng = map.getCenter().lng + "";
        v.getInstitutions("loading");
        // this.selectInstitutions.lat = mapcenters.point.lat;
      });

      v.transit = new BMap.TransitRoute(map, {
        renderOptions: { map: map }
      });
      v.driving = new BMap.DrivingRoute(map, {
        renderOptions: {
          map: map,
          autoViewport: true
        }
      });
      v.walking = new BMap.WalkingRoute(map, {
        renderOptions: {
          map: map,
          panel: "r-result",
          autoViewport: true
        }
      });
      // */
      //更具经纬度获取城市名
      var point = new BMap.Point(116.331398, 39.897445);
      var gc = new BMap.Geocoder();
      gc.getLocation(point, function(rs) {
        var addComp = rs.addressComponents;
        console.log(
          "经纬度获取城市名||||:",
          addComp.province,
          addComp.city,
          addComp.district,
          addComp.street,
          addComp.streetNumber
        );
      });
    
    },