作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
遵循 Google Maps API 中的示例代码(为简洁起见被 chop )如何检查标记图像加载失败并改用其他/默认图像?
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;
关于javascript - 如何检测谷歌地图标记图像无法加载以提供默认图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39206804/
leaflet:一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档: https://leafletjs.cn/reference.html 官网(英文): ht
我是一名优秀的程序员,十分优秀!