vue使用腾讯地图

发布时间:2019-06-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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数据中

vue使用腾讯地图


初始化地图

vue使用腾讯地图


此时你已经可以在当前组件任何位置中使用腾讯地图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,可能是图片放错了位置,具体原因还不清楚。**




脚本宝典总结

以上是脚本宝典为你收集整理的vue使用腾讯地图全部内容,希望文章能够帮你解决vue使用腾讯地图所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue