Google Maps API 必须点击两次标记才能动态显示图像

Question

我在 Google 地图上显示了许多标记。单击标记会弹出一个包含文本和小图像的信息窗口。图像是使用 Jscript 动态加载的。我获取图像的服务器的所有者坚持动态图像加载，因为我可能会显示 100 或 1000 个标记。标记工作正常，直到突然之间，我必须单击标记两次才能显示图像。文本立即显示，但不显示图像。我有一个由动态加载的图像替换的默认图像。以前，默认图像会短暂显示，然后被动态加载的图像替换。现在，默认图像会一直显示，直到第二次单击标记为止。

我还要提一下，一旦显示动态图像，您可以返回并单击标记，动态图像会第一次显示。只有缓存的图像会在第一次单击标记时动态显示。

我一直指定 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');
});

Answer 1

您正在使用 jQuery 动态修改 InfoWindow 内容。在运行该代码之前，您需要等待InfoWindow 上的domready 事件。

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');
    });
});

proof of concept fiddle

代码 sn-p：

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>