如何在v3中为Google地图标记放置多个图标？

Question

我正在尝试创建类似于this的地图（使用API​​的v2）。我希望地图上的每个标记都包含一个框架或背景like so后面的图像。

使用icon和shadow MarkerOptions似乎无法实现此目的，因为标记阴影落后于其他标记图标。

Answer 1

您可以使用优秀的小型图书馆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 yourFramedMarker = new Ns.Marker({
      position: yourMarkerLatlng,
      map: yourMap,
      NsImage: 'example.com/image.png',
      NsFrameImage: 'example.com/frame.png',
});

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

从这里开始CSS工作，您可以随意定位图像。

Answer 2

我认为你必须将图像与标记背景合并。当我构建类似的东西时，我使用CSS精灵并根据标准高度计算垂直偏移（vPos）。我只是不打扰阴影。

     var mImage = new google.maps.MarkerImage("YOURMARKER.png", 
        new google.maps.Size(34, 35), 
        new google.maps.Point(0, vPos),
        new google.maps.Point(10, 34)
    ); 
    //insert marker
    marker = new google.maps.Marker({
        icon: mImage,
        position: new google.maps.LatLng(latitude, longitude),
        map: map
    });

Answer 3

是的，标记阴影全部放在单独的图层中 - 在所有标记下面。您必须将背景和照片合并为一个图标图像，或create a new class which would inherit from MarkerImage。