javascript - 替换 Google map API 中的图 block 图片获取文件覆盖

标签 javascript jquery google-maps

我正在开发一个应用程序,您可以在其中单击谷歌地图图 block ,然后将其替换为另一张图片。

当前的解决方案是我添加了一个覆盖图,并覆盖了 getTile(),以创建一个带有 ID 的自定义 div 和一个单击事件监听器,我可以在其中使用 ID 选择器选择它并使用它。

目前的解决方案是(总结):

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
 var div = ownerDocument.createElement('div');
 div.id = 'block_' + coord.x + '_' + coord.y;
 return div;
};

google.maps.event.addListener(map, 'click', function(event) {
 var coord = ... the current tile coordinate
 var block_to_select = $('#block_' + coord.x + '_' + coord.y);
 do_magic(block_to_select);
}

最好在 gettile() 中添加点击事件监听器,这样我就可以摆脱 ID 和大量计算代码。

我尝试过:

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
 var div = ownerDocument.createElement('div');
 div.dataset.x = coord.x;
 div.addEventListener('click',function(){
    alert(1);
 });
 return div;
}

但是 onclick 函数不会运行。

有没有更高效的方法来替换平铺图片?

返回 jquery $("") 也会在 getTile() 中引发错误。

最佳答案

图 block 将在overlayLayer-mapPane中渲染.

根据文档,此 mapPane 可能不会接收 DOM 事件,因此恐怕没有比通过计算检测特定图 block 更好的方法了。

关于javascript - 替换 Google map API 中的图 block 图片获取文件覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36413629/

相关文章:

javascript - 无法让我的提醒与日历正常配合

javascript - 使用触控板时捕获滚轮/鼠标滚轮事件的边缘替代解决方案

javascript - 如果验证没有问题,请打开新窗口

javascript - 在子窗口中从父窗口运行JS函数?

Javascript:如何将两个对象合并为一个

javascript - Angular 5 阻止 iframe 谷歌地图

javascript - Json 字符串转 Google map 标记

javascript - 如何等待用javascript加载的图像?

javascript - 在 bootstrap 的下拉菜单中将鼠标悬停在鼠标上时保持父项处于选中状态

javascript - 如何将javascript变量值传递给谷歌地图