點擊標記後，將內容字符串加載到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

回答

相關問題