高德地图自定义marker内容,点击链接之后可以携带参数跳转到另一个页面

800 阅读1分钟
async addMarker(lnglats) {
    let that = this;
    for (let i = 0; i < lnglats.length; i++) {
      if (lnglats[i]['lngAndLat']) {

        let arr = lnglats[i]['lngAndLat'].split(',');
        let imgUlr = '../../../assets/image/tank.png';
        let jumpUrl = '/tpl/TankCarMonitoring';

        if (lnglats[i]['type'] == '罐车') {
          imgUlr = '../../../assets/image/tank.png';
          jumpUrl = '#/tpl/TankCarMonitoring';
        } else if (lnglats[i]['type'] == '锅炉') {
          imgUlr = '../../../assets/image/guolu-icon.png';
          jumpUrl = '#/tpl/BoilerMonitoring';
        }

        this.marker = new this.AMap.Marker({
          position: [arr[0], arr[1]], 
          icon: imgUlr,
          map: that.map,
        });
        let infoWindow = new this.AMap.InfoWindow({
          content: `<div style="width:250px;background:rgba(255,255,255,0.7);color:#000;"><div>名称: ${!lnglats[i].name ? '' : lnglats[i].name}</div><div><a href=${jumpUrl}>详情</a></div></div>` 
        });
        this.marker.on('click', function (e) {
          infoWindow.open(that.map, e.target.getPosition());
        });
      }
    }

  }