[英]Load content string to infoWindow after click on marker
我正在使用巨大的圖像鏈接數據庫制作谷歌地圖應用程序。 我說的是數據庫中的數千條記錄。 現在我需要的是在單擊標記后將圖像加載到 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>
那么有沒有辦法在點擊標記后加載圖像?
從 InfoWindow 構造函數中刪除內容並在單擊事件偵聽器函數中設置內容將解決您的問題。
改變:
var infowindow = new google.maps.InfoWindow({
content: contentString
});
到:
var infowindow = new google.maps.InfoWindow();
然后在標記單擊事件偵聽器中設置內容。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.