我目前正在为我的网站实施谷歌地图，偶然发现了一个很棒的教程here，几乎让我到了应许之地。但是，我还有一个我希望添加的功能。在我的数组中，我希望在地图上显示三种不同的自定义标记之一。有没有人有任何想法？
这里是fiddle ...
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
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));
}<div id="map" style="width: 500px; height: 400px;"></div>
答案 0 :(得分：3)
最简单的解决方案，将标记所需图标的URL添加到数组中：
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
['Coogee Beach', -33.923036, 151.259052, 5, "http://maps.google.com/mapfiles/ms/micons/green.png"],
['Cronulla Beach', -34.028249, 151.157507, 3, "http://maps.google.com/mapfiles/ms/micons/yellow.png"],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
['Maroubra Beach', -33.950198, 151.259302, 1, "http://maps.google.com/mapfiles/ms/micons/blue.png"]
];
然后在标记构造函数中使用它：
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: locations[i][4],
map: map
});
代码段
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
['Coogee Beach', -33.923036, 151.259052, 5, "http://maps.google.com/mapfiles/ms/micons/green.png"],
['Cronulla Beach', -34.028249, 151.157507, 3, "http://maps.google.com/mapfiles/ms/micons/yellow.png"],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2, "http://maps.google.com/mapfiles/ms/micons/blue.png"],
['Maroubra Beach', -33.950198, 151.259302, 1, "http://maps.google.com/mapfiles/ms/micons/blue.png"]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
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]),
icon: locations[i][4],
title: locations[i][0],
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}html,
body,
#map {
width: 100%;
height: 100%;
}<script src="http://maps.google.com/maps/api/js"></script>
<div id="map"></div>
答案 1 :(得分：1)
您还没有告诉我们您何时想要显示自定义标记，但要显示自定义制作工具，您只需定义要显示的图像，然后将其作为图标传递给标记对象：yourMarker。
如果要添加条件语句以在给定某个条件的情况下显示某个标记，则可以使用if / else语句来执行此操作。
这是一个小提琴。
http://jsfiddle.net/chrislewispac/jmLq398e/1/
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var goldStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: 'yellow',
fillOpacity: 0.8,
scale: 0.05,
strokeColor: 'gold',
strokeWeight: 2
};
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]),
icon: goldStar,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
参考api： https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom
修改
这是一个更新小提琴，展示了如何根据地理位置自定义图标。
http://jsfiddle.net/chrislewispac/jmLq398e/2/
var goldStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: 'yellow',
fillOpacity: 0.8,
scale: 0.05,
strokeColor: 'gold',
strokeWeight: 2
};
var blueStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: 'yellow',
fillOpacity: 0.8,
scale: 0.05,
strokeColor: 'blue',
strokeWeight: 2
};
var marker, i;
for (i = 0; i < locations.length; i++) {
if (locations[i][1] > -33.9){
var icon = blueStar
}
else {
var icon = goldStar
}
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: icon,
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
编辑＃2
我将您的数组数组转换为对象数组并添加了一个用户属性。然后我调整了你的代码以使用对象而不是数组索引。
var locations = [
{
name: 'Bondi Beach',
lat: -33.890542,
lon: 151.274856,
user: 1
}, /*[......]*/
{
name: 'Maroubra Beach',
lat: -33.950198,
lon: 151.259302,
user: 3
}
];
if (locations[i].user === 1){
var icon = blueStar
} else if (locations[i].user === 2) {
var icon = goldStar
}
else if (locations[i].user === 3) {
var icon = redStar
}
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].lat, locations[i].lon),
icon: icon,
map: map
});