谷歌地圖：關於標記圖標和地理編碼的問題

Question

我已經創建了一個jsp，我已經在Google地圖中使用geocoder類將地址轉換爲標記。現在我唯一遇到的問題是，當我試圖改變標記的圖標圖像時，我只得到所有標記的最後一個圖標。

<script type="text/javascript"> 
var geocoder; 
var address = new Array(); 
var marker = new Array(); 
var images=["A","B","C","D","E","F","G","H","I","J","K","L"]; 

function initialize() 
{ 
var locations = new String("<%=request.getParameter("location")%>"); 
locations=locations.substring(0,(locations.length)-1); 

var map = new google.maps.Map(document.getElementById('googleMap'), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    zoom: 8 
}); 

if(locations=='null' || locations=='') 
    locations = 'Pune, INDIA\;'; 

address = locations.split('\;'); 

marker[0] = new google.maps.Marker({ 
    map:map 
}); 

geocoder = new google.maps.Geocoder(); 
var i=1; 
for(i=1; i<address.length; i++){ 
    geocoder.geocode({ 
      'address': address[i]+", India" 
     },function(results, status){ 
      if(status == google.maps.GeocoderStatus.OK) { 
      var marker = new google.maps.Marker({ 
       map: map, 
       icon: 'http://www.google.com/mapfiles/marker'+images[i]+'.png', 
       position: results[0].geometry.location 
      }); 
      var info = new google.maps.InfoWindow({ 
       content: address[i]+', India' 
      }); 
      google.maps.event.addListener(marker, 'click', function() { 
       info.open(map, marker); 
      }); 
      } 
     }); 
} 
geocoder.geocode({ 
    'address': address[0]+", India" 
    },function(results, status){ 
     if(status == google.maps.GeocoderStatus.OK) { 
     marker[0].setPosition(results[0].geometry.location); 
     map.setCenter(results[0].geometry.location); 
     new google.maps.Circle({ 
      center: results[0].geometry.location, 
      radius: radius * 1000,  // Convert to meters 
      fillColor: '#00ff00', 
      fillOpacity: 0.2, 
      map: map, 
      strokeColor : '#0000ff', 
      strokeOpacity : 0.3, 
      strokeWeight: 1 
     }); 
    } 
}); 
}//End of initialize function. 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

請幫忙!!!

Answer 1

這是一個常見問題（通常遇到infowindows），它可以通過函數關閉來解決（「createMarker」函數是一個選項）。

function createMarker(map, latlng, address, image) { 
     var marker = new google.maps.Marker({ 
      map: map, 
      icon: 'http://www.google.com/mapfiles/marker'+image+'.png', 
      position: latlng 
     }); 
     var info = new google.maps.InfoWindow({ 
      content: address+', India' 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      info.open(map, marker); 
     }); 
    return marker; 
} 

調用它的循環內是這樣的：

geocoder.geocode({ 
     'address': address[i]+", India" 
    },function(results, status){ 
     if(status == google.maps.GeocoderStatus.OK) { 
     var marker = createMarker(results[0].geometry.location, address[i], images[i]); 
     } 
    }); 

working example（你貼像你描述的沒有表現的代碼，包括地理編碼操作功能關閉爲好）

更新： 您還需要地址上的功能關閉（「地理編碼地址」功能）：

function geocodeAddress(map, address, i) { 
    geocoder.geocode({ 
     'address': address+", India" 
    },function(results, status){ 
     if(status == google.maps.GeocoderStatus.OK) { 
    var marker = createMarker(map, results[0].geometry.location, address, images[i]); 
     } 
    }); 
} 

所以你處理循環變爲：

var i=1; 
for(i=0; i<address.length; i++){ 
    geocodeAddress(map, address[i], i); 
} 

代碼片段：

var geocoder; 
 
var address = new Array(); 
 
var marker = new Array(); 
 
var images = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"]; 
 

 
function initialize() { 
 
    var locations = 'Pune\;Mumbai\;'; 
 
    // locations=locations.substring(0,(locations.length)-1); 
 

 
    var map = new google.maps.Map(document.getElementById('googleMap'), { 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     zoom: 8 
 
    }); 
 

 
    if (locations == 'null' || locations == '') 
 
     locations = 'Pune, INDIA\;'; 
 

 
    address = locations.split('\;'); 
 

 
    marker[0] = new google.maps.Marker({ 
 
     map: map 
 
    }); 
 

 
    geocoder = new google.maps.Geocoder(); 
 
    var i = 1; 
 
    for (i = 0; i < address.length; i++) { 
 
     geocodeAddress(map, address[i], i); 
 
    } 
 

 
    geocoder.geocode({ 
 
     'address': address[0] + ", India" 
 
    }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
     //   marker[0].setPosition(results[0].geometry.location); 
 
     map.setCenter(results[0].geometry.location); 
 
     new google.maps.Circle({ 
 
      center: results[0].geometry.location, 
 
      radius: 1000, // radius * 1000,  // Convert to meters 
 
      fillColor: '#00ff00', 
 
      fillOpacity: 0.2, 
 
      map: map, 
 
      strokeColor: '#0000ff', 
 
      strokeOpacity: 0.3, 
 
      strokeWeight: 1 
 
     }); 
 
     } 
 
    }); 
 
    } //End of initialize function. 
 

 
function geocodeAddress(map, address, i) { 
 
    geocoder.geocode({ 
 
    'address': address + ", India" 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     var marker = createMarker(map, results[0].geometry.location, address, images[i]); 
 
    } 
 
    }); 
 
} 
 

 
function createMarker(map, latlng, address, image) { 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    icon: 'http://www.google.com/mapfiles/marker' + image + '.png', 
 
    position: latlng 
 
    }); 
 
    var info = new google.maps.InfoWindow({ 
 
    content: address + ', India' 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    info.open(map, marker); 
 
    }); 
 
    return marker; 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#googleMap { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="googleMap"></div>