javascript检查文件是否存在与谷歌地图api

Question

我正在尝试检查图像是否存在，以便我可以相应地调整我的 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，如果您想看看它的样子。如果您单击百慕大中的图标（没有与之关联的图像文件），我想要修复的一个示例是。

Answer 1

你已经很接近了，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 Fiddle 中工作：https://jsfiddle.net/igor_9000/ts9udgn7/4/

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

希望有帮助！