vue使用腾讯地图

1 vue cli 3.x 使用腾讯地图

1. npm安装腾讯地图

腾讯官方并无在npm上发布腾讯地图插件，因此找到一个别人写的，能够直接调用腾讯地图javascript方法
连接：https://www.npmjs.com/package/qqmap

npm install qqmap --save

在组件中引入

import maps from "qqmap"

data数据中

初始化地图

此时你已经能够在当前组件任何位置中使用腾讯地图javascript方法

例如须要添加Marker

addMarkers(){
     var info = new qq.maps.InfoWindow({
      map: this.map
      });

      if(this.listener.length !=0){
          qq.maps.event.removeListener(this.listener);
      }
    
      var anchor = new qq.maps.Point(18, 49),
      size = new qq.maps.Size(38, 56),
      origin = new qq.maps.Point(0, 0),
      markerIcon = new qq.maps.MarkerImage(
        "https://img/dingwei.png",
        size,
        origin,
        anchor,
        
      );

      this.cars.forEach(e => {
        // 建立标记
        let marker = new qq.maps.Marker({
          position: new qq.maps.LatLng(e.latitude, e.longitude),
          icon:markerIcon,
          map: this.map
        });

       this.markersArray.push(marker);
        // marker.id = e.id;
        // marker.parkCarId = e.parkCarId;
        // marker.status = e.status;
        // 获取标记点击事件
        this.listener = qq.maps.event.addListener(marker, "click", () => {
          info.open(); //点击标记打开提示窗
         info.setContent(
            '<div class="mapInfo"><p class="center">车编号:' +
              e.parkCarId +
              "</p><p>状态:" +
              e.status +
              "</p><p>锁编号:" +
              e.id +
              "</p><p>经度:" +
              e.latitude +
              "</p><p>纬度:" +
              e.longitude +
              "</p></div>"
          ); //***设置提示窗内容（这里用到了marker对象中保存的数据）
          info.setPosition(new qq.maps.LatLng(e.latitude, e.longitude)); //提示窗位置
        });
      });
  
},
  //清除覆盖层
clearOverlays() {
  if (this.markersArray) {
      for (let i in this.markersArray) {
          this.markersArray[i].setMap(null);
      }
      this.markersArray.length = 0;
  }
},

//显示覆盖层
showOverlays() {
    this.addMarkers();
    if (this.markersArray) {
        for (let i in this.markersArray) {
            this.markersArray[i].setMap(this.map);
        }
    }
},

---

注释： markerIcon = new qq.maps.MarkerImage(

*"https://img/dingwei.png",*
        size,
        origin,
        anchor,
        
      );
      **可能会出现设置自定义图片无效，你能够在网络上找一个图片,用https地址，就能够解决不显示的问题。
      使用本地图片，一直不显示Marker,多是图片放错了位置，具体缘由还不清楚。**