是否可以使用多个图像作为 Google Maps v3 MarkerImage？

Question

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

Answer 1

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

如果两个图像始终相同，我想您可以将它们合并为一个并将其存储在图标属性中，然后在阴影属性中使用变量图像，反之亦然（图标将始终位于顶部阴影）。您只需要操作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
  });

Answer 2

我会尝试定义一个新类，该类将继承自 google.maps.MarkerImage 以允许它，然后使用此对象调用 marker.setIcon()。

也可以看看here 和here。

Answer 3

是的，您可以使用多张图像并将它们设置为地图标记数组中每个标记图标的一张图像。

更重要的是您可以使用远程服务器上的图像。 例如，在我的例子中，我加载了一个站点数组，每个站点都有一个站点图像，所以我将标记的图像与站点的图像（从服务器接收）合并。 这是我的解决方案：

mergeImages(element) {

    var canvas: HTMLCanvasElement = this.canvas.nativeElement;

    var context = canvas.getContext('2d');

    let img1 = new Image();
    let img2 = new Image();

    img1.onload = function () {
      canvas.width = img1.width;
      canvas.height = img1.height;
      img2.crossOrigin = 'anonymous';
      img2.src = element.info.image || './assets/img/markers/markerIcon42.png';
    };
    img2.onload = () => {

      context.clearRect(0, 0, canvas.width, canvas.height);
      context.globalAlpha = 1.0;
      context.drawImage(img1, 0, 0);
      context.globalAlpha = 1; //Remove if pngs have alpha
      context.globalCompositeOperation = 'destination-over';
      if (element.info.image === null) {
        context.drawImage(img2, 11, 4, 42, 42);
      } else {
        context.drawImage(img2, 15, 7, 35, 35);
      }
      var dataURL = canvas.toDataURL('image/png', 1.0);
      console.log(dataURL);
      this.markers.push({
        lat: element.info.location.latitude,
        lng: element.info.location.longitude,
        controllerInfo: element.info,
        icon: {
          url: dataURL,
          labelOrigin: { x: 32, y: -10 },
          scaledSize: {
            width: 64,
            height: 64
          },
          origin: { x: 0, y: 0 },
          anchoriconAnchor: { x: 7, y: 7 },
        },
        controllerStaus: element.status,
        label: {
          text: element.info.siteName,
          color: "#ED2C2C",
          fontWeight: "500",
          fontSize: "14px"
        }

      });
      console.log(this.markers);
    };
    img1.src = './assets/img/markers/map-marker64.png';

  }

要添加的重要一点是“img2.crossOrigin = 'anonymous';”这将防止 toDataUrl cors-orign 错误。

这个解决方案也适用于集群

希望对你有帮助

Answer 4

您可以使用出色的小型库RichMarker。它的文档是here。

您甚至可以继承它并创建一个自定义标记类，如下所示：

Ns.Marker = function(properties) {

    RichMarker.call(this, properties);

    this.setContent('<div class="three-images-marker">' +
            properties.NsImage1 ? '<div class="marker-image-1"><img src="'+properties.NsImage1+'"/></div>' : '' + 
            properties.NsImage2 ? '<div class="marker-image-2"><img src="'+properties.NsImage2+'"/></div>' : '' +
            properties.NsImage3 ? '<div class="marker-image-3"><img src="'+properties.NsImage3+'"/></div>'+ 
        '</div>');
};

Ns.Marker.prototype = Object.create(RichMarker.prototype);

然后像这样使用它：

var gorgeousMarker = new Ns.Marker({
      position: yourMarkerLatlng,
      map: yourMap,
      NsImage1: 'example.com/image1.png',
      NsImage2: 'example.com/image2.png',
      NsImage3: 'example.com/image3.png',
});

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

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