Question

使用Google Maps 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/documentation/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的anchor属性。默认情况下，锚点位于图像的底部中心。如果您希望图像居中，则必须将锚点向下移动图像大小的一半以使其居中。

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

Answer 4

请参阅icon：anchor：new google.maps.Point（0,0）

中的anchor属性

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

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

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

4 个答案: