如何在谷歌地图上添加带有不同图标的标记

Question

我有这个代码：

<div id="map_canvas"></div>
<script>
window.onload = function () {
var styles = [{"featureType":"all"}];
var bounds = new google.maps.LatLngBounds();
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center: new google.maps.LatLng(11, 22),
zoom: 15,
disableDefaultUI: true,
mapTypeId: 'Styled'
};
marker = new google.maps.Marker({
map:map,
});
var div = document.getElementById('map_canvas');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
var markers = [
[
'Atrakcja 1 pl', 
51.73925413, 
19.51309225, 
'Atrakcja 1 pl', 
'#'
],
[
'Atrakcja 2 PL', 
53.41475000, 
14.60220358, 
'Atrakcja 2 PL', 
'#'
],
];
var infoWindow= new google.maps.InfoWindow({maxWidth:600}),
marker, i,
image = 'http://localhost/assets/poi.png';
for( i = 0; i < markers.length; i++ ) {
var beach = markers[i];
var position = new google.maps.LatLng(beach[1], beach[2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
icon: image,
title: beach[0],
myurl: beach[4]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent('<a href="'+marker['myurl']+'">'+marker['title']+'</a>');
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
map.mapTypes.set('Styled', styledMapType);
}
}
</script>

该代码创建了一个带有许多标记的谷歌地图。在上面的例子中有2点。点在地图上居中。我想再补充一点：

['Main Point', 51.424150124, 14.6032790-8, 'Main Point', '#']

关于标记：

image2 = 'http://localhost/assets/poi2.png';

如何在代码中执行此操作？我想在地图上有两种类型的标记(两种颜色(。

Answer 1

您可以为每个点将图像名称添加到标记数组中吗？

var markers = [
['Atrakcja 1 pl', 51.73925413, 19.51309225, 'Atrakcja 1 pl', '#', 'poi.png'],
['Atrakcja 2 PL', 53.41475000, 14.60220358, 'Atrakcja 2 PL', '#', 'poi.png'],
['Main Point', 51.424150124, 14.6032790-8, 'Main Point', '#', 'poi2.png']
];
var infoWindow= new google.maps.InfoWindow({maxWidth:600}),
marker, i;
for( i = 0; i < markers.length; i++ ) {
var beach = markers[i];
var position = new google.maps.LatLng(beach[1], beach[2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
icon: 'http://localhost/assets/' + beach[5],
title: beach[0],
myurl: beach[4]
});
...
}