我需要顯示具有多個標記的地圖,我發現this question這有我在找什麼,但問題是我需要顯示每個標記項目旁邊。如何顯示谷歌地圖上的項目類似於谷歌顯示其結果的方式
<c:forEach var="product" items="products">
${product.name}
</c:forEach>
我也檢查了this question的答案,但沒有多大幫助。
谷歌地圖代碼
var pinColor = "FE7569";
var marker, i;
var address=[];
address[0] = "New york";
address[1] = "las vegas";
address[2] = "san francisco";
address[3] = "chicago";
// Set default map center location
var latlng = new google.maps.LatLng(latcenter,longcenter);
// Create pinShadow for each marker
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com /chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
// Function to create the dynamic marker
function pinImage(i){
return image = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/"+i+"/"+pinColor+"/", new google.maps.Size(21, 34), new google.maps.Point(0,0), new google.maps.Point(10, 34));
}
// Function to run once page has loaded
function initialize(){
var geocoder=new google.maps.Geocoder();
// Set Default settigns for google map
var settings = {
zoom: 3,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP};
// Start Google Maps and assign it to div on site
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
// loop though total numner of address in array
for (var i = 0; i < address.length; i++) {
(function(i) {
// Use geocoder to grab latlong for user inputed address
geocoder.geocode({ 'address': address[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Redefine map center location
if (i == 1){ map.setCenter(results[0].geometry.location); }
// Create dynamic markers on map as per the address array
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title:address[i],
zIndex: i,
// PROBLEM CODE --- Using the function below it creates all Markers with a "1" instead of the "i" value..??
icon: pinImage(i),
shadow: pinShadow
});
}
});
})(i);
}
}
google.maps.event.addDomListener(window, 'load', initialize)
較佳輸出類似於以下圖像,每個結果有一個名爲標記及其位置是由圖上其相關聯的標記示出。我需要標記是按字母順序排列的,而不是根據座標而不是編號來編號。
哪一部分無法正常工作? JSP或Javascript部分? – Jeroen
@Jeroen我不知道如何在每個產品名稱旁邊添加標記 –