显示自定义Google地图的多种图像标记图标的最佳方式 [英] Best way to display a custom Google maps multiple image marker icon

问题描述

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

您可以使用一个优秀的小库， RichMarker 。其文档此处。为了简化使用，您甚至可以创建自己的自定义标记类，如下所示：

  Ns.Marker =函数（属性）{
 
 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）; 
 
 
 //并且像这样使用它：
 var gorgeousMarker = new Ns.Marker（{
 position：yourMarkerLatlng，
 map：yourMap，
 NsImage：'example.com/image.png'，
 NsFrameImage：'example.com/frame.png'，
}）; 
  

'Ns'是您使用的任何名称空间，如果您使用。

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

I have two images, one is like an icon and the other is the icon background, what is the best way to combine these two images and make a google marker v3 icon? They are not svg or paths, they are just two png images.

解决方案

You can use an excellent little library, RichMarker. Its documentation is here.

To make usage easier, you can even create your own custom marker class, something like this:

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' is whatever namespace you use, if you do.

From here on it's CSS work, you can position the images as you like.

这篇关于显示自定义Google地图的多种图像标记图标的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！