如何访问Google Maps API v3标记的DIV及其像素位置？ [英] How to access Google Maps API v3 marker's DIV and its pixel position?

问题描述

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

但是无法得到它，因为某些标记没有id或class。只有我可以通过标记对象和未公开的pixelBounds对象访问地图canvas div。

$ b

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 +））;
}）;


解决方案

我真的不明白为什么要获得标记的特定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）*比例）
）; 
  

在 pixelDistance 中，锚从地图的左上角开始计算（您可以从 map.getDiv（） div）获取它的位置。为什么它像这样工作（或者有更好的方法？）您可以阅读谷歌地图覆盖文件。

Instead of Google Maps API's default info window, I'm going to use other jQuery tooltip plugin over marker. So I need to get marker's DIV and its pixel position.

But couldn't get it because there are no id or class for certain marker. Only I can access map canvas div from marker object and undocumented pixelBounds object.

1. How can I access marker's DIV?
2. Where can I get DIV's pixel position? Can I convert lat-lng position to pixel values?

== appended:

I also tried with below code, but it doesn't change when I scroll the map.

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 + ")");
});

解决方案

I don't really get why would you want to get specific div for marker? If you want to display tooltip then all you need is pixel position of markers anchor (and knowledge about size of marker and placement of anchor), not div element. You can always trigger opening and closing tooltip by hand when event occurs on google.maps side.

For getting pixel position of anchor of given marker you can use this code:

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)
);

In pixelDistance you get offset of specific marker anchor counted from left upper corner of the map (and you can get it's position from map.getDiv() div). Why it works like this (or is there a better way?) you can read in documentation of google maps overlays.

这篇关于如何访问Google Maps API v3标记的DIV及其像素位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！