javascript - 是否可以使用多张图片作为 Google Maps v3 MarkerImage？

Question

我想要一个由三张图片组成的 map 标记。两个图像在所有标记中都是相同的，其中一个是可变的。似乎没有办法在 MarkerImage 类上指定多个图像。我能想到的唯一方法是将所有图像绘制到 Canvas 上，然后将其输出为 MarkerImage 类的 png dataURL。不过，这似乎有点矫枉过正。

Answer 1

我认为使用三个单独的图像是不可能的。

如果两个图像总是相同的，我想你可以将它们组合成一个并将其存储在 icon 属性中，然后在 shadow 属性中使用可变图像，反之亦然(图标将始终位于阴影)。您只需操纵 MarkerImage 对象的大小和位置。

工作示例:http://jsfiddle.net/mG4uz/1/

var image1 = new google.maps.MarkerImage(
   'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png',
    new google.maps.Size(45, 90), //adjust size of image placeholder  
    new google.maps.Point(0, 0), //origin
     new google.maps.Point(0, 25) //anchor point
  );

var image2 = new google.maps.MarkerImage(
   'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png',
   new google.maps.Size(45, 45),
   new google.maps.Point(0, 0), 
   new google.maps.Point(0, 0) 
  );

var marker = new google.maps.Marker({
   position: centerPosition,
   map: map,
   icon: image1,
   shadow:image2
  });