TMap地图平移触发事件

1.地图触发事件

    initMap() {

      let that = this;
      let values;
      // 监听地图平移开始
      this.map.on('pan', function () {
        this.lat = that.map.getCenter().lat;
        this.lng = that.map.getCenter().lng;
        values = {lat: this.lat, lng: this.lng};
      });
      // 监听地图平移结束
      this.map.on('panend', function () {
        that.devList(values);//所要调用的接口请求
      });
    },

2.地图初始化之后触发initMap事件

  init(val) {
      this.center = new TMap.LatLng(this.lat, this.lng); //(39.984104, 116.307503);//设置中心点坐标

      this.map = {};
      // 初始化地图
      this.map = new TMap.Map('container', {
        center: this.center
      });

      var that = this;
      this.map.on('click', function () {
        that.infoWindow.close();
      });

      const devReqParam = {lat: this.lat, lng: this.lng}
      // 加载设备列表接口
      this.devList(devReqParam);

      // 初始marker
      this.marker1 = new TMap.MultiMarker({
        id: 'marker-layer3',
        map: this.map,
        styles: {
          marker1: new TMap.MarkerStyle({
            width: 40,
            height: 45,
            anchor: {x: 20, y: 35},
            src: `${icon}`
          }),
          marker2: new TMap.MarkerStyle({
            width: 40,
            height: 45,
            anchor: {x: 20, y: 35},
            src: `${icon2}`
          }),
          marker3: new TMap.MarkerStyle({
            width: 40,
            height: 45,
            anchor: {x: 20, y: 35},
            src: `${icon3}`
          }),
          marker4: new TMap.MarkerStyle({
            width: 40,
            height: 45,
            anchor: {x: 20, y: 35}
            // src: `${icon3}`
          })
        },
        geometries: this.list
      });

      /**
       * 标注点击事件
       */
      this.marker1.on('click', function (evt) {
        that.showTip(evt);
      });

      var infoTip = `
                  <div class="info">
                    </div>
                  `;
      let tk = new TMap.LatLng(39.984104, 116.307503);
      // 初始化infoWindow
      this.infoWindow = new TMap.InfoWindow({
        map: this.map,
        position: tk,
        content: infoTip,
        offset: {x: 0, y: -35} //设置信息窗相对position偏移像素
      });

      // 关闭弹窗
      this.infoWindow.close();

      this.initMap();
    }

3.点击时触发-html部分

  <div id="container" style="width:100%;height:100%;" @click="initMap"/>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值