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

Posted 2023-02-23

【中文标题】javascript检查文件是不是存在与谷歌地图api

【英文标题】：javascript checking if file exists with google maps apijavascript检查文件是否存在与谷歌地图api

【发布时间】：2016-06-07 00:35:56

【问题描述】：

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

【问题讨论】：

您在控制台中看到了哪些 javascript 错误？请提供一个 Minimal, Complete, Tested and Readable example 来证明您的问题。

不幸的是，我在 javascript 中没有收到任何错误。它只是没有正确显示。上面是有效的代码（目前在网站上），下面的两部分分别是我替换和替换它的代码，以使其只放置第一个引脚。

请提供一个Minimal, Complete, Tested and Readable example 来证明您的问题，包括任何必需的数据/html/CSS。

你在 JS Fiddle 中有什么东西吗？我所在的地方无法访问您的域。

很遗憾没有。该代码包含一些允许其运行所需的 php。我还没有完全弄清楚 jsfiddle 可以使用它。

【参考方案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/

希望有帮助！

【讨论】：

工作就像一个魅力。谢谢。当然，必须是愚蠢的。

好的，所以我实现了这个，它工作了，但现在它停止工作了。即使在你的jsfiddle中。有什么想法吗？ ImageExists() 函数现在似乎总是返回 false。

它看起来仍在工作中。 ImageExists() 函数在我的 JS Fiddle 中总是返回 false，因为您的域被我的 ISP 阻止。如果我使用 placehold.it 中的图像，使用数组中的数据作为图像大小，它可以工作。我更新了小提琴以表明：jsfiddle.net/igor_9000/ts9udgn7/6

我看到了你更新的代码，但它仍然只是为我进入 else 语句。我不确定为什么。 i.imgur.com/ml1cKmi.png

@AdamKonieska 这个工作只是因为你的浏览器已经下载了图片，ImageExist 总是会为新图片返回 false。