google-maps - 显示自定义谷歌地图多图像标记图标的最佳方式

Question

我有两张图片，一张像图标，另一张是图标背景，将这两张图片结合起来制作谷歌标记 v3 图标的最佳方法是什么？它们不是 svg 或路径，它们只是两个 png 图像。

Answer 1

您可以使用一个优秀的小库RichMarker。它的文档在这里。

为了使使用更容易，您甚至可以创建自己的自定义标记类，如下所示：

Ns.Marker = function(properties) {

    RichMarker.call(this, properties);

    this.setContent('<div class="three-images-marker">' +
            properties.NsImage ? '<div class="marker-image-1"><img src="'+properties.NsImage1+'"/></div>' : '' + 
            properties.NsFrameImage ? '<div class="marker-image-2"><img src="'+properties.NsImage2+'"/></div>' : '' +
        '</div>');
};

Ns.Marker.prototype = Object.create(RichMarker.prototype);


// and use it like this:
var gorgeousMarker = new Ns.Marker({
      position: yourMarkerLatlng,
      map: yourMap,
      NsImage: 'example.com/image.png',
      NsFrameImage: 'example.com/frame.png',
});

'Ns' 是你使用的任何命名空间，如果你这样做的话。

从这里开始它的 CSS 工作，您可以随意放置图像。

Answer 2

最简单的方法：使用图像编辑器制作单个图像并将其用作自定义标记的图标。

如果您不能或不想这样做，您可以制作一个行为类似于标记的自定义叠加层（参考），并使用它在地图上以正确的顺序叠加两个图像。