如何检测谷歌地图标记图像加载失败，以提供默认图像代替

How to detect google map marker image failed to load to provide default image instead?

本文关键字：图像 失败 加载 默认 何检测 检测 图标 地图 谷歌      更新时间：2023-09-26

以下是来自Google Maps API的示例代码(为简洁而截断)，我如何检查标记图像未能加载并使用不同的/默认图像代替?

var image = {
  url: 'https://broken.url.com/no-such-image.png',
  size: new google.maps.Size(20, 32),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(0, 32)
};
var marker = new google.maps.Marker({
  position: {lat: -33.890542, lng: 151.274856},
  map: map,
  icon: image,
  title: 'Marker demo',
  zIndex: 1
});

您可以尝试使用javascript加载图像。如果它可以加载(onload事件被触发)，添加带有图像的标记，否则(onerror事件被触发)退回到其他东西(例如没有图像的默认标记):

var image = new Image();
var image_url = "https://broken.url.com/no-such-image.png";
image.onload = function () {
   console.info("Image loaded, adding marker with image !");
   var marker = new google.maps.Marker({
        position: {lat: -33.890542, lng: 151.274856},
        map: map,
        icon: {
             url: image_url,
             size: new google.maps.Size(20, 32),
             origin: new google.maps.Point(0, 0),
             anchor: new google.maps.Point(0, 32)
        },
        title: 'Marker demo',
        zIndex: 1
   });
}
image.onerror = function () {
   console.error("Cannot load image, adding marker without image");
   var marker = new google.maps.Marker({
      position: {lat: -33.890542, lng: 151.274856},
      map: map,
      title: 'Marker demo',
      zIndex: 1
   });
}
image.src = image_url;
相关文章：