Google Maps v3 自定义标记图标无法保持其在地图上的位置答案

【问题标题】：Google Maps v3 custom marker icon does not keep it's position on mapGoogle Maps v3 自定义标记图标无法保持其在地图上的位置
【发布时间】：2012-03-08 11:15:43
【问题描述】：

使用 Google Maps v3 进行开发。

出于某种原因，我的自定义标记图标“更改”了它在放大时的位置。看起来它有某种“填充”属性，不会随着缩放而改变。

这意味着它在最大缩放 (18) 上的位置是正确的，但是如果我更改缩放值，它会“移动”一点到顶部，并且在较小的缩放值上会出现问题，因为它看起来不像位置相同。

标记定义为：

var image = new google.maps.MarkerImage('img/antennas/img.png',new google.maps.Size(100, 100));

这可能会有所帮助：标记图标是方形的，100x100 像素，并且它的中心位于图像中间，而不是像“普通”标记那样位于底部。

更新：我必须对锚属性做些什么吗？

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

您必须设置标记的锚点。默认为中底。

见http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerImage

【讨论】：

【解决方案2】：

根据您对“填充”的描述，这听起来像是 MarkerImage 的定位问题。尝试调整 MarkerImage 的锚属性。默认情况下，锚点位于图像的底部中心。如果您希望图像居中，则必须将锚点向下移动图像大小的一半以使其居中。

参考http://code.google.com/intl/no/apis/maps/documentation/javascript/reference.html#MarkerImage。

【讨论】：

【解决方案3】：

不要只使用 Marker，还可以使用 MarkerImage，用作标记。

在这个例子中，我使用了一个中间有一个点的圆形标记，所以我总是希望它居中。

例子

 var marker_image = new google.maps.MarkerImage(
        '../Media/icon_maps_marker.png',
         null,
         // The origin for my image is 0,0.
         new google.maps.Point(0, 0),
         // The center of the image is 50,50 (my image is a circle with 100,100)
         new google.maps.Point(50, 50)
     );
    var marker = new google.maps.Marker({
        clickable: true,
        map: map,
        position: center_location,
        icon: marker_image,
    });

【讨论】：

【解决方案4】：

查看图标中的锚属性：anchor: new google.maps.Point(0, 0)

var icon = {
    url: image,
    anchor: new google.maps.Point(0, 0)
  };

  marker = new google.maps.Marker({
    position: Latlng,
    map: map,
    icon: icon,
    optimized: false
  });

【讨论】：