如何在v3中为Google地图标记放置多个图标？ [英] How to place multiple icons for Google map markers in v3?

问题描述

我正在尝试制作类似于。其文档此处。为了简化使用，您甚至可以创建自己的自定义标记类，如下所示：

  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 yourFramedMarker = new Ns.Marker（{
 position：yourMarkerLatlng，
 map：yourMap，
 NsImage：'example.com/image.png'，
 NsFrameImage：'example.com/frame.png'，
}）; 
  

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

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

I'm trying to create a map similar to this (which is using v2 of the API). I want each marker on the map to consist of an image with a frame or background behind like so.

Using the icon and shadow MarkerOptions doesn't seem to accomplish this because a markers shadow falls behind other markers icons.

解决方案

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 yourFramedMarker = 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.

这篇关于如何在v3中为Google地图标记放置多个图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！