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;
            }
        });
    }