-2

我正在使用 LIT-HTML 构建谷歌地图，我有一个显示在地图上的地点列表，当您单击标记时会弹出一个信息窗口。我想在这个信息窗口中添加一个带有点击事件的按钮，但我不知道如何在谷歌标记信息窗口中触发按钮的点击事件。这是我尝试过的：

function buildMarkerList() {
    this.markerList = this.places.map((place, i) => {

            const marker = new google.maps.Marker({

                position: new google.maps.LatLng(
                    parseFloat(place.latitude),
                    parseFloat(place.longitude),
                ),
                map: this.map
            });
            const infowindow = new google.maps.InfoWindow();

            marker.addListener('click',  () => {

                const content = `
                <div>
                    <h3>TITLE</h3>
                    <p>DESCRIPTION</p>
                   <button id="myButton" @click=${() => this.buttonEvent(place)}">button</button>
                </div>`;


                infowindow.setContent(content);

                infowindow.open(this.map, marker);

            });
            return marker;
        });
}

buttonEvent(place){
    // DO SOMETHING
}

我期望单击标记-> 显示信息窗口-> 单击信息窗口中的按钮-> 调用 buttonEvent()

4

1 回答 1

1

好吧，如果其他人发现自己遇到了同样的问题，我找到了解决方案...

我没有使用模板文字创建我的 inforWindow html，而是使用了 vanilla js，如下所示：

               const content = `
                    <div>
                        <h3>TITLE</h3>
                        <p>DESCRIPTION</p>
                    </div>`;

                const div = document.createElement("div");
                div.id = "container";
                div.innerHTML += content;

                const button = document.createElement("button");
                button.onclick = () => this.toGoogleMapDirections(place);
                button.innerHTML = 'Directions';

                div.appendChild(button);

                infowindow.setContent(div)
于 2019-08-08T06:59:47.513 回答