javascript - javascript检查文件是否存在与谷歌 map api

我正在尝试检查图像是否存在，以便可以相应地调整contentString。但是，当我尝试执行此操作时，地图上仅显示一个针脚（第一个）。

  var checkins = <?php echo $json; ?>;
  function imageExists(url, callback) {
    var img = new Image();
    img.onload = function() { callback(true); };
    img.onerror = function() { callback(false); };
    img.src = url;
  }
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {lat: 39.8282, lng: -98.5795}
    });
    setMarkers(map);
  }
  function setMarkers(map) {
    var infowindow = new google.maps.InfoWindow({
      content: ""
    });
    for (var i = 0; i < checkins.length; i++) {
      var checkin = checkins[i];
      var marker = new google.maps.Marker({
        position: {lat: parseFloat(checkin[2]), lng: parseFloat(checkin[3])},
        map: map,
        title: checkin[1]
      });
      var imageUrl = 'http://rjbogz.ddns.net/pictures/'+checkin[0]+'.jpg';
      imageExists(imageUrl, function(exists) {
        if (exists){
          contentString = '<b>'+checkin[6]+'</b><br><b>'+checkin[4]+'</b> by <b>'+checkin[5]+'</b><br>At <b>'+checkin[1]+'</b><br><img src="pictures/'+checkin[0]+'.jpg" style="width:300px;height:300px;">';
          bindInfoWindow(marker, map, infowindow, contentString);
        } else {
          contentString = '<b>'+checkin[6]+'</b><br><b>'+checkin[4]+'</b> by <b>'+checkin[5]+'</b><br>At <b>'+checkin[1]+'</b>';
          bindInfoWindow(marker, map, infowindow, contentString);
        }
      });
    }
  }
  function bindInfoWindow(marker, map, infowindow, description) {
      marker.addListener('click', function() {
          infowindow.setContent(description);
          infowindow.open(map, this);
      });
  }

如通过imageExists函数可以看到的，我尝试添加检查以查看图像是否存在，但随后它仅在地图上绘制了一个图钉。如果您要查看网站的外观，当前会将其发布到http://rjbogz.ddns.net/map.php。我要修复的一个示例是，如果您单击百慕大中的图标（没有与之关联的图像文件）。

最佳答案

您已经很接近了，if (ImageExists(image) != 0) {仅存在几个问题

首先，您已将该函数声明为ImageExist，因此需要修复该错字。其次，您可能想将if(ImageExists(image) != 0) {更改为if(ImageExists(image)) {，因为您的函数将返回布尔值。

最后，您的contentString中有一些未公开的HTML。

对您的代码进行这些调整应该可以解决它，它看起来像这样：

if (ImageExist(image)) {
    contentString = '<b>'+checkin[6]+'</b><br><b>'+checkin[4]+'</b> by <b>'+checkin[5]+'</b><br>At <b>'+checkin[1]+'</b><br><img src="pictures/'+checkin[0]+'.jpg" style="width:300px;height:300px;">';
} else {
    contentString = '<b>'+checkin[6]+'</b><br><b>'+checkin[4]+'</b> by <b>'+checkin[5]+'</b><br>At <b>'+checkin[1]+'</b>';
}

您可以在JS小提琴中查看它的工作原理：https://jsfiddle.net/igor_9000/ts9udgn7/4/

以及一个更新的小提琴，显示了它如何处理placehold.it中的图像：https://jsfiddle.net/igor_9000/ts9udgn7/6/

希望有帮助！