在 Google 地图中的地图图块上触发悬停

Posted 2023-03-12

【中文标题】在 Google 地图中的地图图块上触发悬停

【英文标题】：Triggering hover on map tiles in Google Maps

【发布时间】：2012-07-20 05:25:38

【问题描述】：

我想在 Google 地图中的图块鼠标悬停时触发 jquery 事件。我能想到的最好的是。

$('div.tileclass').live('hover', function()
   $("#debugger").prepend("test");  //Dummy just to test if this works
);

这只会在地图加载时触发悬停动作，而不是在页面加载后触发

可以在此处看到：http://rider.cyclistsroadmap.com（尽管不会显示调试器 div，并且警报往往对测试来说很烦人，并希望加载地图）

页面加载后能够触发动作的任何方式

【问题讨论】：

我使用 Firebug 将 css“pointer-events: none”添加到其他层之一，甚至可以完美运行！知道如何从 javascript 将其添加到另一层的 css 吗？

【参考方案1】：

需要给地图的mousemove事件添加事件监听，如：

google.maps.event.addListener(map,'mousemove', function(mev)
    var TILE_SIZE = 256;
    var proj = map.getProjection();
    var numTiles = 1 << map.getZoom();
    var worldCoordinate = proj.fromLatLngToPoint(mev.latLng);

    var pixelCoordinate = new google.maps.Point(
            worldCoordinate.x * numTiles,
            worldCoordinate.y * numTiles);
        var tileCoordinate = new google.maps.Point(
            Math.floor(pixelCoordinate.x / TILE_SIZE),
            Math.floor(pixelCoordinate.y / TILE_SIZE));

    debug('TileX:' +tileCoordinate.x+' - TileY:'+tileCoordinate.y);

);

注意这个separate file中包含debug()函数

此处发布的代码主要基于文档中的this example。