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

Question

使用 Google 地图 v3 进行开发。

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

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

标记定义为：

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

这可能会有所帮助：标记图标是方形的，100x100px，它的中心位于图像的中间，而不是像“正常”标记那样位于底部。

更新：我是否必须对锚点属性执行某些操作？

Answer 1

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

请参阅 http://code.google.com/apis/maps/文档/javascript/reference.html#MarkerImage

Answer 2

除了使用 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,
    });

Answer 3

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

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

Answer 4

查看图标中的anchor属性：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
  });