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

问题描述 投票:0回答:1

我在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');
});
javascript php google-maps-api-3
1个回答
1
投票

您正在使用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');
    });
});

proof of concept fiddle

代码段:

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>
© www.soinside.com 2019 - 2024. All rights reserved.