Question

我有两个图像，一个像图标，另一个是图标背景，将这两个图像组合在一起制作google marker v3图标的最佳方法是什么？它们不是svg或路径，它们只是两个png图像。

Answer 1

最简单的方法：使用图像编辑器制作单个图像，并将其用作icon for your custom marker。

如果您不能或不想这样做，您可以制作一个行为类似于标记的custom overlay（reference）并使用它以正确的顺序覆盖这两个图像地图。

Answer 2

您可以使用优秀的小型图书馆RichMarker。其文档为here。

为了方便用法，您甚至可以创建自己的自定义标记类，如下所示：

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工作，您可以随意定位图像。

显示自定义Google地图多个图像标记图标的最佳方式

2 个答案: