点击标记后，将内容字符串加载到infoWindow

-1

我正在制作一个谷歌地图应用程序，使用巨大的图像链接数据库。我正在谈论数以千计的数据库记录。现在我需要的是点击标记后将图像加载到infoWindow。因为考虑到标记的数量并加载每个单独的映像需要很长时间，并且使我的应用程序无法使用。让有来自谷歌文档，这个更新的代码为例：点击标记后，将内容字符串加载到infoWindow

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
      height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
    </style> 
</head> 
<body> 
<div id="map"></div> 
<script> 
    var map; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 2, 
      center: {lat: -33.865427, lng: 151.196123}, 
      mapTypeId: 'terrain' 
     }); 

     // Create a <script> tag and set the USGS URL as the source. 
     var script = document.createElement('script'); 

     // This example uses a local copy of the GeoJSON stored at 
     // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp 
     script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js'; 
     document.getElementsByTagName('head')[0].appendChild(script); 

    } 
    var marker; 

    function eqfeed_callback(results) { 
     var heatmapData = []; 
     for (var i = 0; i < results.features.length; i++) { 
      var coords = results.features[i].geometry.coordinates; 
      var latLng = new google.maps.LatLng(coords[1], coords[0]); 
      heatmapData.push(latLng); 

      if(i%2==0){ 
       var contentString = 
        '<div class="photo">' + 
        '<IMG BORDER="0" ALIGN="Left" width="150px" height="100px" SRC="https://f4.bcbits.com/img/0008736837_10.jpg">' + 
        '</div>'; 
      } 
      else{ 
       var contentString = 
        '<div class="photo">' + 
        '<IMG BORDER="0" ALIGN="Left" width="150px" height="100px" SRC="https://www.drupal.org/files/ship-hires.jpeg">' + 
        '</div>'; 
      } 


      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 
      marker = new google.maps.Marker({ 
       map: map, 
       position: latLng 
      }); 

      addListener(marker,map,infowindow); 
     } 
     var heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: heatmapData, 
      dissipating: false, 
      map: map 
     }); 

     function addListener(marker,map,infowindow) { 
      marker.addListener('click', function() { 
       infowindow.open(map, marker); 
      }); 
     } 

    } 
</script> 
<script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAq3U7rLNpim50Qk_zbq9mur8VFLAeqy-4&libraries=visualization&callback=initMap"> 
</script> 
</body> 
</html>

那么，有没有办法点击标记后加载图像？

来源

2017-04-17 nocturne

为什么当点击标记显示infowindow时，图像未被加载？ – geocodezip

因为当我用照片删除div时，页面的加载速度会更快。假设我的应用程序具有唯一的每个图像。 – nocturne

当我在Google Chrome中删除缓存的数据时，在〜300张图片中总是会有大约300 MB的空间。即使我没有点击任何标记。 – nocturne

从InfoWindow构造函数中删除内容并在click事件侦听器函数中设置内容将解决您的问题。

变化：

var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     });

到：

var infowindow = new google.maps.InfoWindow();

然后设置在标记点击事件侦听器的内容。

来源

2017-04-17 14:09:46 geocodezip

点击标记后，将内容字符串加载到infoWindow

回答

相关问题