谷歌地图多个maker标记点击显示当前信息弹窗infowindow

发布时间:2024年01月16日

1、初始化好谷歌地图后,再创建一个infowindow对象,下面是自己封装的方法
this.infowindow = this.map.createInfoWindow({ pixelOffset: new google.maps.Size(-30, -40) })// 水平偏移量为0,垂直偏移量为-50

2、然后创建好maker后,监听点击事件,谷歌地图的maker标记没有对应的字段存放的,可以通过原型绑定,以下方法的创建对象,都是自定义封装,只需看对应方式

  let obj = {}
  obj.lat = v.addressLat
  obj.lng = v.addressLng

 let makerobj = { pos: { lat: obj.lat, lng: obj.lng }}
  let marker = this.map.addMaker(makerobj)
  marker.makerInfo = obj //通过绑定变量后,再点击事件里面 通过this指向拿到maker对象的绑定变量
  marker.addListener('click', function (event) {
       that.handleClickMaker(marker, this.makerInfo)
  });

3、infowindow弹窗的设置,踩坑多次,不懂其他的以下是验证的关键,自己测试,只有html字符串才能实现,不懂在vue遇到什么坑

  // marker点击事件
        async handleClickMaker (marker, info) {
            this.infoObj = { ...info }
            let url = this.infoObj.pictureUrl
            let picUrl = this.pictureUrl;
            if (url) {
                picUrl = await getPicUrl({
                    picUrl: url,
                });
            }

            this.infoDom = ` <div style=" height: max-content; width: 250px;background-color: #fff;box-sizing: border-box;padding:10px 20px;">
            <div style=" display: flex; align-items: center; width: 100%; height: 20px; font-size: 12px;">
                <span style="font-size: 12px;"><span style=" margin-right: 5px;">地点位置:</span>${this.infoObj.areaName}${this.infoObj.status == 1 ? "启用" : "停用"}】</span>
            </div>
            <div  style=" display: flex; align-items: center; width: 100%; height: 20px; font-size: 12px;">
                <span style="font-size: 12px;"><span style=" margin-right: 5px;">站点属性:</span>${this.getProperty(this.infoObj.property)}</span>
            </div>
            <div style=" font-size: 12px;">站点图片:</div>
            <div style="width: 100%; height: 100px;">
                <img style=" width: 100%; height: 100%;" src="${picUrl}" alt="">
            </div>
        </div>`
  
            this.infowindow.setPosition(marker.getPosition()); //设置弹窗位置
            this.infowindow.setContent(this.infoDom); // 赋值html

            // 如果当前 infowindow 是显示状态,则隐藏它
            if (this.infowindow.getMap()) {
                this.infowindow.close();
            }
            // 显示新的 infowindow,关键的一句
            this.infowindow.open(this.map.gmap);
            this.map.gmap.panTo(marker.getPosition()); //移动视图中心位置
        },
文章来源:https://blog.csdn.net/ZhouLoverBrother/article/details/135616088
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。