InfoBox プラグインを使用して、Google マップでカスタムのインタラクティブな情報ウィンドウを作成しています。これらの情報ウィンドウから、ユーザーはリストをスクロールし、画像をクリックしてスクリプトを呼び出すことができます。問題は、enableEventPropagation が有効になっている場合、インフォボックスをクリックして他のマーカーに移動し、別のインフォボックスがポップアップすることです。
誰もこの問題を解決した経験がありますか?
InfoWindow = new InfoBox({
content: document.getElementById("infobox-wrapper"),
disableAutoPan: true,
enableEventPropagation: true,
zIndex: null,
pixelOffset: new google.maps.Size(-300, -0),
closeBoxURL: '../assets/images/info-close.png',
boxStyle: {
color: 'white',
background: '#101010',
width: "600px",
height: "400px"
},
infoBoxClearance: new google.maps.Size(1, 1)
});
インフォボックスの削除
function removeInfoWindow() {
$('.infoBox').remove()
}
インフォボックス内の画像がクリックされたときに呼び出される Javascript は、enableEventPropagation が true に設定されている場合にのみ機能します
$(document.body).on('touchstart', '.infoBox img', function () {
if ($(this).attr('val') == 'off') {
//turn on
$(this).attr('val', 'on');
$(this).attr('src', '../assets/images/check.png');
} else {
//turn off
$(this).attr('val', 'off');
$(this).attr('src', '../assets/images/uncheck.png');
}
});