[英]How to detect google map marker image failed to load to provide default image instead?
按照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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.