我使用Google Maps API获得以下JS：
// initialize variables
var infowindow = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var gmarkers = [];
$(document).ready(function () { initialize(); });
function initialize() {
// directions
directionsDisplay = new google.maps.DirectionsRenderer();
var centerMap = new google.maps.LatLng(busipress_map_vars.center_lat , busipress_map_vars.center_long);
var myOptions = {
zoom: 4,
center: centerMap,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var start = busipress_map_vars.path_start;
var end = busipress_map_vars.path_end;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(map);
}
/**
* show locations
*/
var sites = busipress_map_vars.locations;
/**
* set markers on map
*/
function setMarkers(map, markers) {
// default icon
var defaultIcon = new google.maps.MarkerImage(busipress_map_vars.default_map_icon,
// This marker is 32 pixels wide by 32 pixels tall.
new google.maps.Size(busipress_map_vars.default_map_icon_width, busipress_map_vars.default_map_icon_height),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point((busipress_map_vars.default_map_icon_width / 2), busipress_map_vars.default_map_icon_height));
// default shadow
var shadow = new google.maps.MarkerImage(busipress_map_vars.map_icon_shadow,
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(busipress_map_vars.map_icon_shadow_width, busipress_map_vars.map_icon_shadow_height),
new google.maps.Point(0,0),
new google.maps.Point((busipress_map_vars.default_map_icon_width / 2), busipress_map_vars.map_icon_shadow_height));
// active icion
var activeIcon = new google.maps.MarkerImage(busipress_map_vars.active_map_icon,
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(busipress_map_vars.active_map_icon_width, busipress_map_vars.active_map_icon_height),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point((busipress_map_vars.active_map_icon_width / 2), busipress_map_vars.active_map_icon_height));
var shape = {
coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
type: 'poly'
};
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
icon: sites[4][0],
shadow: sites[6][0],
zIndex: 1,
html: sites[3]
});
google.maps.event.addListener(marker, "click", function () {
for (var i = 0; i < gmarkers.length; i++) {
//gmarkers[i].setIcon(defaultIcon);
gmarkers[i].setIcon(sites[4][0]);
}
//this.setIcon(activeIcon);
this.setIcon(sites[5][0]);
infowindow.setContent(this.html);
infowindow.open(map, this);
});
gmarkers.push(marker);
}
}
我正在尝试做的是为每个标记映射每个site的图标（因为它是唯一的），然后单击鼠标右键，将其更改为该网站的活动状态。因此，将其更改为活动图标似乎可行，但使用该重置功能（将所有其他功能更改回默认图标），它会将其转换回网站的某个图标，而不是每个图标。任何人都对为什么会发生这种情况有任何疑问？
此外，当我第一次挖掘时，我使用的是defaultIcon（您可以在点击操作中看到它被注释掉。因为我现在通过本地化传递图标的URL Javascript，我可以将new google.maps.Marker传递给原始var defaultIcon声明中的大小，原点和点。例如，sites[4][0]只会有一个图像网址，但sites[4][1]将具有宽度，而sites[4][2]具有高度。我实际上并不确定在没有任何东西的情况下会发生什么事情，所以这里有点困惑谢谢！
我在想这个问题可能就在我宣布变量的地方，所以我将它们添加到for loop并调整地图标记以使用它们：
// initialize variables
var infowindow = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var gmarkers = [];
$(document).ready(function () { initialize(); });
function initialize() {
// directions
directionsDisplay = new google.maps.DirectionsRenderer();
var centerMap = new google.maps.LatLng(busipress_map_vars.center_lat , busipress_map_vars.center_long);
var myOptions = {
zoom: 4,
center: centerMap,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var start = busipress_map_vars.path_start;
var end = busipress_map_vars.path_end;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(map);
}
/**
* show locations
*/
var sites = busipress_map_vars.locations;
/**
* set markers on map
*/
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
// default icon
var defaultIcon = new google.maps.MarkerImage(sites[4][0],
// This marker is 32 pixels wide by 32 pixels tall.
new google.maps.Size(sites[4][1], sites[4][2]),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point((sites[4][1] / 2), sites[4][2]));
// default shadow
var shadow = new google.maps.MarkerImage(sites[6][0],
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(sites[6][1], sites[6][2]),
new google.maps.Point(0,0),
new google.maps.Point((sites[6][1] / 2), sites[6][2]));
// active icion
var activeIcon = new google.maps.MarkerImage(sites[5][0],
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(sites[5][1], sites[5][2]),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point((sites[5][1] / 2), sites[5][2]));
var shape = {
coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
type: 'poly'
};
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
icon: defaultIcon,
shadow: shadow,
zIndex: 1,
html: sites[3]
});
google.maps.event.addListener(marker, "click", function () {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon(defaultIcon);
}
this.setIcon(activeIcon);
infowindow.setContent(this.html);
infowindow.open(map, this);
});
gmarkers.push(marker);
}
}
但它会将defaultIcon更改为一个，而不是单个defaultIcon图像。这可能与另一个for循环中的for循环有关，但我不太确定。
答案 0 :(得分：4)
您需要更改点击侦听器功能：
google.maps.event.addListener(marker, "click", function () {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon(defaultIcon);
}
this.setIcon(activeIcon);
infowindow.setContent(this.html);
infowindow.open(map, this);
});
您需要为每个标记保存“唯一”图标并将其更改回该标记，而不是defaultIcon。最简单的可能是将其保存为标记的属性（即marker.myDefaultIcon），然后你可以这样做：
gmarkers[i].setIcon(gmarkers[i].myDefaultIcon);
jsfiddle（再次从previous question修改）
更新：我在您提供的链接上收到了javascript错误：
Error: marker[i] is undefined
Source File: http://zslabs.com/jhtwp/wp-content/plugins/busipress/js/map.1349993292.js
Line: 105
105就是这一行：this.setIcon(marker[i].myActiveIcon);
这里：
google.maps.event.addListener(marker, "click", function () {
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setIcon(gmarkers[i].myDefaultIcon);
}
this.setIcon(marker[i].myActiveIcon);
infowindow.setContent(this.html);
infowindow.open(map, this);
});
我想你想要这个.myActiveIcon。
jsfiddle illustrating the concept（“点”处于活动状态，默认不是点数）