所以我正在努力学习如何制作谷歌地图.我对
javascript的了解很少,但我想在这里学习.
我在网上引用了一个代码,并且我已经明白了如何添加位置,标记和信息,但我正在试图找出如何为每个标记添加多个自定义图标.
谢谢您的帮助.
function initialize() {
//add map,the type of map
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 6,center: new google.maps.LatLng(37.7749295,-122.4194155),mapTypeId: google.maps.MapTypeId.ROADMAP
});
//add locations
var locations = [
['San Francisco: Power Outage',37.7749295,-122.4194155],['Sausalito',37.8590937,-122.4852507],['Sacramento',38.5815719,-121.4943996],['Soledad',36.424687,-121.3263187],['Shingletown',40.4923784,-121.8891586]
];
//declare marker call it 'i'
var marker,i;
//declare infowindow
var infowindow = new google.maps.InfoWindow();
//add marker to each locations
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,});
//click function to marker,pops up infowindow
google.maps.event.addListener(marker,'click',(function(marker,i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map,marker);
}
})(marker,i));
}
}
google.maps.event.addDomListener(window,'load',initialize);
解决方法
有多种方法,最简单的方法是将标记的icon-property设置为要显示为标记的图像的URL.
样品：
//modified array with icon-URLs
var locations = [
['San Francisco: Power Outage',-122.4194155,'http://labs.google.com/ridefinder/images/mm_20_purple.png'],-122.4852507,'http://labs.google.com/ridefinder/images/mm_20_red.png'],-121.4943996,'http://labs.google.com/ridefinder/images/mm_20_green.png'],-121.3263187,'http://labs.google.com/ridefinder/images/mm_20_blue.png'],-121.8891586,'http://labs.google.com/ridefinder/images/mm_20_yellow.png']
];
//inside the loop
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1],icon: locations[i][3]
});
