// 引入鹅厂地图
    initMap(lat = 0.0000000, lng = 0.0000000) {
      // 定义地图中心点坐标-
      var center = new TMap.LatLng(lat, lng)
      // 定义map变量,调用 TMap.Map() 构造函数创建地图
      map = new TMap.Map(document.getElementById('txMapBox'), {
        center: center, // 设置地图中心点坐标
        zoom: 16.8, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
        viewMode: '2D'
      })
      // 初始化marker图层(标记点,即红点)
      markerLayer = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map
      })
      // 绑定点击事件
      map.on('click', evt => {
        console.log(evt)
        const latb = parseFloat(evt.latLng.lat.toFixed(6))
        const lngb = parseFloat(evt.latLng.lng.toFixed(6))
        // 点击地图时的操作,存新的点的经纬度
        this.postForm.store_longitude = lngb
        this.postForm.store_latitude = latb
        // 修改地图中心
        this.changeCenter(latb, lngb)
        // 获取地图标记点(红点)
        const arrB = markerLayer.getGeometries()
        if (arrB.length > 1) {
          const delArr = arrB.map((itemB, index) => {
            if (index + 1 < arrB.length) {
              return itemB.id
            }
          })
          // 点击新位置,删除旧的位置标记点
          markerLayer.remove(delArr)
        }
      })
    },
    loadScript() {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=*****-*****-*****-*****-*****-*****&callback=init'
      script.onload = script.onreadystatechange = () => {
        if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
          // 初始化地图,传入地图中心点经纬度
          this.initMap(this.coordinate.lat, this.coordinate.lng)
          // 给地图中心点添加标记(红点)
          markerLayer.add({
            position: new TMap.LatLng(this.coordinate.lat, this.coordinate.lng)
          })
          script.onload = script.onreadystatechange = null
        }
      }
      document.body.appendChild(script)
    },

loadScript的src的key是要去腾讯地图官方申请的  

然后在mounted生命周期里调用就是了

补充:map和markerLayer可以先定义;var map; var markerLayer;

Logo

前往低代码交流专区

更多推荐