如何访问Google Maps API v3标记的DIV及其像素位置？

Question

我将使用其他jQuery工具提示插件而不是Google Maps API的默认信息窗口.所以我需要得到标记的DIV及其像素位置.

但无法得到它,因为某些标记没有id或class.只有我可以从标记对象和未记录的pixelBounds对象访问地图画布div.

1. 如何访问标记的DIV？
2. 我在哪里可以获得DIV的像素位置？我可以将lat-lng位置转换为像素值吗？

==追加:

我也试过下面的代码,但滚动地图时它没有改变.

var marker = new google.maps.Marker({...});
google.maps.event.addListener(marker, 'click', function() {
    var px = this.getMap().getProjection().fromLatLngToPoint(this.getPosition());
    console.log("(" + px.x + "," + px.y + ")");
});

Answer 1

我真的不明白为什么你想得到标记的特定div？如果要显示工具提示,那么您需要的只是标记锚点的像素位置(以及有关标记大小和锚点位置的知识),而不是div元素.在google.maps端发生事件时,您始终可以手动触发打开和关闭工具提示.

要获取给定标记的锚点的像素位置,您可以使用以下代码:

var scale = Math.pow(2, map.getZoom());
var nw = new google.maps.LatLng(
    map.getBounds().getNorthEast().lat(),
    map.getBounds().getSouthWest().lng()
);
var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
var pixelOffset = new google.maps.Point(
    Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
    Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
);

在pixelDistance你得到从地图左上角算起的特定标记锚点的偏移量(你可以从map.getDiv()div 得到它的位置).为什么它会像这样工作(或者有更好的方法？)你可以阅读谷歌地图叠加层的文档.

Answer 2

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

var proj = overlay.getProjection();
var pos = marker.getPosition();
var p = proj.fromLatLngToContainerPixel(pos);

您现在可以通过px和py访问像素坐标

更新后评论:

叠加投影的失败是,直到你的地图画布完成加载,它才会被初始化.我有以下监听器,它会强制在地图完成加载时触发我需要的任何方法.

google.maps.event.addListener(map, 'idle', functionName());

与此同时,我使用以下检查以避免在绘制之前出现任何错误.

if(overlay.getProjection()) {
  // code here
}