Google Maps API - 标记图像的偏移量 - 替换标记 - 不在 GeoPosition

Question

我有一张图片（一个圆圈），应该表示一个特定的大都市区。我也有我所有相关领域的GeoPosition。

如果我放置标记，则图像的底部中心位于标记的GeoPosition。但是因为它是鸟瞰图，所以我想给图像一个偏移量，所以我的圆形图像的 center 在那个 GeoPosition...

任何想法如何实现这一目标？

谢谢！

Answer 1

感谢 LeJared 我找到了解决方案。我的问题是我认为MarkerImage 取代了Marker。但是您必须先定义图像，然后将其插入Marker。

示例：

首先定义图像：

var image = new google.maps.MarkerImage("some/path/image.png",
        // This marker is 20 pixels wide by 32 pixels tall.
        null, 
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        new google.maps.Point(75, 35)
    );

然后将其插入到常规标记中：

    var myMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        title: "My Title",
    });

Answer 2

从 Google API 3.11 版开始，MarkerImage was replaced by Icon。所以这是将标记缩放到 50px 并将其定位以使其 center 位于地理位置上的新方法：

var image = {
        url: '/some/path/image.png',
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(25, 25),
        scaledSize: new google.maps.Size(50, 50)
    };

var myMarker = new google.maps.Marker({
      position: position,
      icon: image,
      title: 'title',
      map: map
    });

Answer 3

您必须指定 markerImage 中的锚点在哪里。请参阅文档：https://developers.google.com/maps/documentation/javascript/reference?hl=de#MarkerImage

如果没有指定，谷歌假设你的 markerImage 底部边缘的中心作为锚点。

这是 API 文档中的一个示例，如何使用正确的 markerImage 构建复杂的标记：https://google-developers.appspot.com/maps/documentation/javascript/examples/icon-complex?hl=de

Answer 4

这是我的看法。

new google.maps.Marker({
  position: pos,
  map: map,
  icon: {
    url: src,
    anchor: new google.maps.Point(25, 25),
    origin: new google.maps.Point(0, 0),
    scaledSize: new google.maps.Size(50, 50)
  }
});