Google Maps JS API v3- Marker Clusterer/Marker圖標/信息窗口

在我開始之前，讓我解釋一下，我是JavaScript和Google Maps API的新手，所以我要問的內容可能對您非常簡單，經驗豐富的劇本作家！基本上我已經開始編寫腳本在英國地圖上顯示多個標記。我想我已經發現了一種做法（當前的腳本），但是我還想添加標記聚類器函數（以便某個距離聚類內的點聚集在一起），除了將標記圖標更改爲圖像我保存在文件中。最後，除了添加點之外，我還想爲每個標記添加一個信息窗口。此窗口需要能夠顯示圖像和文本。Google Maps JS API v3- Marker Clusterer/Marker圖標/信息窗口

如果有人在那裏誰可以幫助，也許調整我的腳本，包括上面列出的所有東西，我真的很感激它！

此腳本最終也將被放大以包含超過1000個標記，因此如果任何人都可以提供幫助，他們也可以添加一個註釋，以便將圖像文件包含在圖標/新信息窗口腳本中會去（如我添加到每個標記），那麼它會超級！

這是腳本，我現在有它：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false" 
     type="text/javascript"></script> 
</head> 
<body> 
<div id="map" style="width: 1000px; height: 800px;"></div> 

<script type="text/javascript"> 
var locations = [ 
    ['1', 53.682401, -1.498260, 4], 
    ['2', 53.681844, -1.496072, 5], 
    ['4', 53.690408, -1.628518, 2], 
    ['5', 53.713762, -1.632297, 1], 
    ['6', 50.466238, -3.528505, 1], 
    ['7', 50.435496, -3.566492, 1], 
    ['8', 50.546012, -3.496630, 1], 
    ['9', 50.529788, -3.611082, 1], 
    ['10', 50.620188, -3.411804, 1] 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 6, 
    center: new google.maps.LatLng(54.664097, -2.752708), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

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

var marker, i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 
} 
</script> 
</body> 
</html>

提前感謝！

來源

2014-10-07 Jonny Payne

//array to store the markers - to cluster them 
var markers = []; 
// i have added an image to each marker 
var locations = [ 
    ['1', 53.682401, -1.498260, 4, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['2', 53.681844, -1.496072, 5, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['4', 53.690408, -1.628518, 2, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['5', 53.713762, -1.632297, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['6', 50.466238, -3.528505, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['7', 50.435496, -3.566492, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['8', 50.546012, -3.496630, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['9', 50.529788, -3.611082, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'], 
    ['10', 50.620188, -3.411804, 1, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'] 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 6, 
    center: new google.maps.LatLng(54.664097, -2.752708), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var marker, i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon: locations[i][4] 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     var infowindow = new google.maps.InfoWindow(); 
     infowindow.setContent('marker number: ' +locations[i][0] +'<br/><IMG SRC=" '+locations[i][4] +'">'); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 

// add marker to array 
markers.push(marker); 
} 
// create cluster 
var markerCluster = new MarkerClusterer(map, markers);

更新小提琴： http://jsfiddle.net/iambnz/pfa4w0w5/

文檔：

https://developers.google.com/maps/documentation/javascript/markers?hl=de#simple_icons

來源

2014-10-07 17:38:34 devbnz

哇BNZ是輝煌謝謝！雖然有可能爲你解釋，我該如何創建一個信息窗口每個標記都可以讓我可以放入自己的可編輯文本，而不是說'標記號x'那裏，甚至可能是一個圖像？我輸入了一些文本，我認爲它會去（在腳本的這部分的1,2,3等之後： var locations = [ ['1'，53.682401，-1.498260,4''https ：//google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png']，但是它只是在信息窗口中顯示'標記號：（輸入文本）' – 2014-10-08 09:29:49

歡迎 - 代碼已更新，現在每次點擊標記時，都會創建一個新的infowindow，其中包含位置數組中的數據。我使用標記編號以及圖像在infowindow中顯示，意思是位置[0]和[4 ]。 – devbnz 2014-10-08 11:34:41

哇BNZ是輝煌謝謝！雖然你有可能解釋我如何爲每個標記創建一個信息窗口，以便不用說'標記號x'，我可以將我自己的可編輯文本放在那裏，甚至可能是圖像？

我已經輸入一些文字，我覺得它會去（後1,2,3腳本的這部分等：

var locations = [ 
['1', 53.682401, -1.498260, 4, 'https://google-developers.appspot.com/maps/documentation/javascript/examples/full/images/beachflag.png'],

但它只是說「標記編號：（輸入的文本）「在信息窗口。

再次感謝曾經對你的幫助，你都在大規模幫我！

來源

2014-10-08 09:27:35

Google Maps JS API v3- Marker Clusterer/Marker圖標/信息窗口

回答

相關問題