我在Google地图上显示了许多标记。单击标记会显示包含文本和小图像的信息窗。使用Jscript动态加载图像。我得到图像的服务器的所有者坚持动态图像加载,因为我可以显示100或1000个标记。标记工作正常,直到突然,我必须点击标记TWICE才能显示图像。文本立即显示,但不显示图像。我有一个默认图像,由动态加载的图像替换。之前,默认图像将短暂显示,然后由动态加载的图像替换。现在,显示默认图像,直到第二次单击标记。
我还要提一下,一旦显示动态图像,您可以返回并单击标记,第一次显示动态图像。首次单击标记时,仅动态显示缓存的图像。
我一直在指定v = 3。我尝试删除版本号,但不能修复它。
这个完全相同的代码用于在单击标记时立即显示图像。现在,您必须单击标记TWICE。我没有收到任何控制台错误。
var currentInfoWindow = null;
var marker6891957 = new google.maps.Marker({
position: new google.maps.LatLng(54.3958333, 9.79166666),
icon: '/images/blue-dot.png',
map: map,
title: 'DC6UW'
});
var infowindow6891957 = new google.maps.InfoWindow({
content: '<b><a href="https://www.qrz.com/db/DC6UW" target=_blank>DC6UW</a></b><br>Fed. Republic of Ger<br>Digital 20m 50.00W<br>Distance: 4159 miles<br>Milliwatts/Mile: 12.02<br><a href="https://s3.amazonaws.com/files.qrz.com/w/dc6uw/100_6713.jpg" target=_blank><img id="id" src="images/qrzimagen.png" height=110></a><br>Click for larger image<br><br>'
});
google.maps.event.addListener(marker6891957, 'click', function() {
if (currentInfoWindow != null) {
currentInfoWindow.close();
}
infowindow6891957.open(map, marker6891957);
currentInfoWindow = infowindow6891957;
$('#id').attr('src', 'https://s3.amazonaws.com/files.qrz.com/w/dc6uw/100_6713.jpg');
});
您正在使用jQuery动态修改InfoWindow
内容。在运行该代码之前,您需要等待domready
上的InfoWindow
事件。
google.maps.event.addListener(marker6891957, 'click', function() {
if (currentInfoWindow != null) {
currentInfoWindow.close();
}
infowindow6891957.open(map, marker6891957);
currentInfoWindow = infowindow6891957;
google.maps.event.addListenerOnce(currentInfoWindow, 'domready', function() {
$('#id').attr('src', 'https://cdn.pixabay.com/photo/2015/11/07/11/34/kitten-1031261_960_720.jpg');
});
});
代码段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(54.3958333, 9.79166666),
zoom: 10
});
var currentInfoWindow = null;
var marker6891957 = new google.maps.Marker({
position: new google.maps.LatLng(54.3958333, 9.79166666),
// icon: '/images/blue-dot.png',
map: map,
title: 'DC6UW'
});
var infowindow6891957 = new google.maps.InfoWindow({
content: '<b><a href="https://www.qrz.com/db/DC6UW" target=_blank>DC6UW</a></b><br>Fed. Republic of Ger<br>Digital 20m 50.00W<br>Distance: 4159 miles<br>Milliwatts/Mile: 12.02<br><a href="https://cdn.pixabay.com/photo/2015/11/07/11/34/kitten-1031261_960_720.jpg" target=_blank><img id="id" src="images/qrzimagen.png" height=110></a><br>Click for larger image<br><br>'
});
google.maps.event.addListener(marker6891957, 'click', function() {
if (currentInfoWindow != null) {
currentInfoWindow.close();
}
infowindow6891957.open(map, marker6891957);
currentInfoWindow = infowindow6891957;
google.maps.event.addListenerOnce(currentInfoWindow, 'domready', function() {
$('#id').attr('src', 'https://cdn.pixabay.com/photo/2015/11/07/11/34/kitten-1031261_960_720.jpg');
});
});
google.maps.event.trigger(marker6891957, 'click');
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="btn" value="click" type="button" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap" async defer></script>