Javascript 谷歌地图api还原图标样式更改
我正在创建一个地图,在鼠标悬停时,被悬停的图标会改变样式,这很好,问题是当第二个标记悬停时,我需要第一个标记“返回”到原始样式,但找不到方法。 这是目前正在运行的代码,如果您能给我一个提示,告诉我应该在哪里面对这个问题,我将不胜感激。 谢谢Javascript 谷歌地图api还原图标样式更改,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我正在创建一个地图,在鼠标悬停时,被悬停的图标会改变样式,这很好,问题是当第二个标记悬停时,我需要第一个标记“返回”到原始样式,但找不到方法。 这是目前正在运行的代码,如果您能给我一个提示,告诉我应该在哪里面对这个问题,我将不胜感激。 谢谢 var infoWindow=new google.maps.infoWindow(); var markerGroups={ “波长”:[], “波长_100G”:[], “以太网”:[], “IP_过境”:[], “视频”:[], “CDN”:[] };
var infoWindow=new google.maps.infoWindow();
var markerGroups={
“波长”:[],
“波长_100G”:[],
“以太网”:[],
“IP_过境”:[],
“视频”:[],
“CDN”:[]
};
函数加载(){
var map=new google.maps.map(document.getElementById(“map”){
中心:新google.maps.LatLng(38.639104,-8.210413),
缩放:3
});
//var infoWindow=new google.maps.infoWindow();
set('styles',[{zoomControl:false},
{“elementType”:“标签”,“样式器”:[{“可见性”:“关闭”}]},
{“featureType”:“administrative”,“stylers”:[{“visibility”:“off”}]},
{“featureType”:“横向”、“样式器”:[{“颜色”:“#0b223a”}]},
{“featureType”:“poi”,“样式器”:[{“可见性”:“关闭”}]},
{“featureType”:“road”,“stylers”:[{“visibility”:“off”}]},
{“featureType”:“transit”,“stylers”:[{“visibility”:“off”}]},
{“特征类型”:“水”,“样式”:[{“颜色”:“#0b5ca2”}]}
]);
下载URL(“../markers/points.php”),函数(数据){
//控制台日志(数据);
//var xml=xmlParse(data.response);
var xml=data.responseXML;
var markers=xml.documentElement.getElementsByTagName(“标记”);
对于(var i=0;i“+地址;
//var icon=customIcons[type]| |{};
var marker=createMarker(点、名称、地址、类型、地图);
bindInfoWindow(标记、地图、infoWindow、html);
}
});
}
函数createMarker(点、名称、地址、类型、映射){
var marker=new google.maps.marker({
地图:地图,
位置:点,,
图标:{
路径:google.maps.SymbolPath.CIRCLE,
比例:3,
冲程重量:1.5,
strokeColor:#01B04C“,
fillColor:#0b223a“,
填充不透明度:1.0
},
//shadow:icon.shadow,
类型:类型,
});
如果(!markerGroups[type])
标记组[类型]=[];
MarkerGroup[类型]。推送(标记);
var html=“”+名称+”
“+地址;
bindInfoWindow(标记、地图、infoWindow、html);
返回标记;
}
功能切换组(类型){
对于(var i=0;ivar infoWindow = new google.maps.InfoWindow();
var markerGroups = {
"Wavelength": [],
"Wavelength_100G": [],
"Ethernet": [],
"IP_Transit": [],
"Video": [],
"CDN": []
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(38.639104, -8.210413),
zoom: 3
});
//var infoWindow = new google.maps.InfoWindow();
map.set('styles', [{zoomControl: false},
{"elementType": "labels", "stylers": [{"visibility": "off"}]},
{"featureType": "administrative", "stylers": [{"visibility": "off"}]},
{"featureType": "landscape", "stylers": [{"color": "#0b223a"}]},
{"featureType": "poi", "stylers": [{"visibility": "off"}]},
{"featureType": "road", "stylers": [{"visibility": "off"}]},
{"featureType": "transit", "stylers": [{"visibility": "off"}]},
{"featureType": "water", "stylers": [{"color": "#0b5ca2"}]}
]);
downloadUrl("../markers/points.php", function (data) {
//console.log(data);
//var xml = xmlParse(data.response);
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
//alert(markers[i].getAttribute("name"));
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
// var icon = customIcons[type] || {};
var marker = createMarker(point, name, address, type, map);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function createMarker(point, name, address, type, map) {
var marker = new google.maps.Marker({
map: map,
position: point,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
strokeWeight: 1.5,
strokeColor: "#01B04C",
fillColor: "#0b223a",
fillOpacity: 1.0
},
// shadow: icon.shadow,
type: type,
});
if (!markerGroups[type])
markerGroups[type] = [];
markerGroups[type].push(marker);
var html = "<b>" + name + "</b> <br/>" + address;
bindInfoWindow(marker, map, infoWindow, html);
return marker;
}
function toggleGroup(type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (!marker.getVisible()) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'mouseover', function (markerGroups) {
}
this.setIcon({
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
strokeWeight: 1.5,
strokeColor: "#01B04C",
fillColor: "#F26522",
fillOpacity: 1.0
});
$("#res").html(html);
}
);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
google.maps.event.addDomListener(window, 'load', load);
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}
var infoWindow = new google.maps.InfoWindow();
var lastHovered = null;
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'mouseover', function (markerGroups) {
if (lastHovered) {
// Set back the original icon
...
}
// Set current marker with the hover icon
...
// Set current as lastHovered - so we can unset it when a mouseover on a new marker occurs
lastHovered = marker;
}
});
}