Google maps 如何访问谷歌地图API v3标记'；s DIV及其像素位置？_Google Maps_Google Maps Api 3

Google maps 如何访问谷歌地图API v3标记'；s DIV及其像素位置？

google-maps google-maps-api-3

Google maps 如何访问谷歌地图API v3标记'；s DIV及其像素位置？,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,我将不使用GoogleMapsAPI的默认信息窗口，而是在标记上使用其他jQuery工具提示插件。所以我需要得到标记的DIV和它的像素位置但无法获取它，因为没有特定标记的id或类。只有我可以从marker对象和未记录的pixelBounds对象访问map canvas div 如何访问marker的DIV 我在哪里可以得到DIV的像素位置？我可以将横向位置转换为像素值吗 == 附加：我也尝试了下面的代码，但当我滚动地图时，它没有改变 var marker=new google.maps.ma

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

但无法获取它，因为没有特定标记的id或类。只有我可以从marker对象和未记录的pixelBounds对象访问map canvas div

如何访问marker的DIV

我在哪里可以得到DIV的像素位置？我可以将横向位置转换为像素值吗

== 附加：

我也尝试了下面的代码，但当我滚动地图时，它没有改变

var marker=new google.maps.marker（{…}）；
google.maps.event.addListener（标记'click'，函数（）{
var px=this.getMap（）.getProjection（）.fromLatLngToPoint（this.getPosition（））；
console.log（“+px.x+”，“+px.y+”）；
});

我真的不明白为什么要为marker获取特定的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（）中获取其位置）。为什么它是这样工作的（或者有更好的方法吗？）您可以读入。

Rene的答案只提供“世界坐标”（即，坐标独立于缩放级别和视口）。MBO的答案似乎是正确的，所以这是你应该接受并投票支持的答案（我不能，因为我刚刚注册了），否则这个解决方案很容易被忽略

至于“更简单”的版本，您可以使用MapCanvasProjection中的方法，但这意味着您必须创建自己的覆盖。有关示例，请参见：P

var overlay=new google.maps.OverlayView（）；
overlay.draw=函数（）{}；
覆盖.setMap（map）；
var proj=overlay.getProjection（）；
var pos=marker.getPosition（）；
var p=LatlNgtoContainerPixel（位置）项目；

现在可以通过p.x和p.y访问像素坐标

添加了以下评论：

覆盖投影的缺点是，在地图画布完成加载之前，它不会初始化。我有下面的监听器，当映射完成加载时，它将强制执行我需要触发的任何方法

google.maps.event.addListener（map'idle'，functionName（））；

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

if（overlay.getProjection（））{
//代码在这里
}

MapCanvasProjection的

fromLatLngToContainerPixel（）

可能是作者的目标。它将为您提供相对于贴图容器的像素偏移。我做了一些实验，找到了“最简单”的工作解决方案。（我希望谷歌能让这个功能更容易使用！）

首先声明

OverlayView

的子类，如下所示：

function CanvasProjectionOverlay() {}
CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
CanvasProjectionOverlay.prototype.onAdd = function(){};
CanvasProjectionOverlay.prototype.draw = function(){};
CanvasProjectionOverlay.prototype.onRemove = function(){};

然后，在代码中实例化映射的其他地方，也实例化此OverlayView并设置其映射，如下所示：

var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);

// Add canvas projection overlay so we can use the LatLng to pixel converter
var canvasProjectionOverlay = new CanvasProjectionOverlay();
canvasProjectionOverlay.setMap(map);

然后，无论何时需要使用LatlngToContainerPixel的

，您只需执行以下操作：
canvasProjectionOverlay.getProjection().fromLatLngToContainerPixel(myLatLng);

请注意，由于MapCanvasProjection对象仅在调用draw（）
时可用，这是在贴图的idle
之前的某个时间，因此我建议创建一个布尔“mapInitialized”标志，在第一个贴图idle
回调中将其设置为true。然后只在那之后做你需要做的事。使用MBO代码时要记住一件事：
重复贴图平铺时，map.getBounds（）.getSouthWest（）
返回“-180”，与贴图的位置无关。我在本例中使用的回退方法是计算到中心的像素距离，而不是左上角，因为在任何情况下，map.getCenter（）
似乎都会返回当前的中心点。例如（使用jQuery）：
//从左上角以像素为单位计算标记位置
var pixelCoordsCenter=map.getProjection（）.fromLatLngToPoint（map.getCenter（））；
pixelOffset=新建google.maps.Point(
数学地板（（pixelCoordsMarker.x-pixelCoordsCenter.x）*比例+$（容器）.width（）/2），
数学地板（（pixelCoordsMarker.y-pixelCoordsCenter.y）*比例+$（容器）.height（）/2）
);
如果您必须访问DIV，这里有一些代码。请注意，这只适用于标准标记（20x34px），它将找到所有标记。您可能希望改进此黑客程序以满足您的需要
当心！这是一次黑客攻击
var a=document.getElementById('map_canvas');
var b=a.getElementsByTagName('img');
var i, j=b.length;
for (i=0; i<j; i++) {
  if(b[i].src.match('marker_sprite.png')){
    if(b[i].style.width=='20px' && b[i].style.height=='34px') {
      c=b[i].parentElement;
      console.log(c.style.top+":"+c.style.left);
      // this is a marker's enclosing div

    }
  }
}

var a=document.getElementById（'map_canvas'）；
var b=a.getElementsByTagName（'img'）；
var i，j=b.长度；
对于（i=0；i准备好复制/粘贴的工作代码段jQuery样式：
步骤1-初始化地图和选项
<html>
<head>
<script src="get-your-jQuery" type="text/javascript"></script>
<script src="get-your-maps.API" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
var bucharest = new google.maps.LatLng(44.43552, 26.10250);
var options = {
zoom: 14,
center: bucharest,
mapTypeId: google.maps.MapTypeId.ROADMAP 
}


我来了！
任何仍在寻找答案的人，请查看此处：
在其他一些有用的google maps东西中，有一个RichMarker，它允许您添加您选择的DOM元素作为可拖动的标记。只需添加class/id来处理jQuery。
我发现分配自定义图标并使用img src属性访问元素是最简单的。您仍然可以使用默认的google maps图标，只需将其保存在本地即可。
$("#map img[src='my_marker.png']").getBoundingClientRect();

在许多情况下，使用复杂的数学来计算和更改接受答案中的销位置可能是合适的
为了我的特殊用途，我刚刚创建了一个透明的PNG，画布比我需要的图标大得多。然后我只是尝试在透明背景中移动图钉，并将新图像应用到地图上

以下是添加自定义pin图像的规范，并附有示例：

此方法肯定会以pi为单位缩放为偏移量
$("#map img[src='my_marker.png']").getBoundingClientRect();

marker.addListener("click", markerClicked);

function markerClicked(event) {
    // here you can get the marker div by event.currentTarget
}