![](/img/trans.png)
[英]Google Maps Javascript API - Hide circle on load and zoom out and show on click
[英]show/hide circle on google maps javascript api
当用户将鼠标悬停在Google Maps圆上时将其显示,当鼠标悬停时将其隐藏。 此代码可在鼠标移出时隐藏圆圈,但在鼠标悬停时不会重新显示圆圈。 我也尝试了circle.setMap(null)然后是circle.setMap(map),这就是我将地图作为参数传递给showHide函数的原因。
var buildings = {};
buildings['Tinsley'] = {
center: new google.maps.LatLng(30.512028, -90.466363),
radius: 20,
description: "<div>Tinsley Hall</div>",
desMaxWidth: 500,
};
buildings['Pottle'] = {
center: new google.maps.LatLng(30.513184, -90.467562),
radius: 40,
description: "<div>Pottle Hall</div>",
desMaxWidth: 500,
};
function initialize() {
var southeastern = new google.maps.LatLng(30.5153382,-90.4676681);
var mapOptions = {
zoom: 17,
center: southeastern
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.southeastern.edu/_new-resources/includes/slu.kml'
});
ctaLayer.setMap(null);
var counter = 0;
for (var building in buildings) {
var buildingCircle = {
strokeColor: 'darkgreen',
strokeOpacity: 0.3,
strokeWeight: 3,
clickable: true,
fillColor: 'gold',
fillOpacity: 0.35,
map: map,
visible: true,
center: buildings[building].center,
radius: buildings[building].radius,
};
markerCircle = new google.maps.Circle(buildingCircle);
attachInfoWindow(map, markerCircle, buildings[building].description);
showHideCircle(map, markerCircle);
counter++
}
}
function attachInfoWindow(map, circle, info){
var infowindow = new google.maps.InfoWindow({
content: info
});
google.maps.event.addListener(circle, 'click', function(ev) {
infowindow.setPosition(circle.getCenter());
infowindow.open(map);
});
}
function showHideCircle(map, circle){
google.maps.event.addListener(circle, 'mouseover', function(){
circle.setVisible(true);
});
google.maps.event.addListener(circle, 'mouseout', function(){
circle.setVisible(false);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
如果要使用鼠标悬停/鼠标移出,则不能使用“可见”或从地图上删除圆圈。 将fillOpacity和stokeOpacity设置为0以隐藏圆。
function showHideCircle(map, circle) {
google.maps.event.addListener(circle, 'mouseout', function () {
circle.setOptions({fillOpacity:0, strokeOpacity:0});
});
google.maps.event.addListener(circle, 'mouseover', function () {
circle.setOptions({fillOpacity: 0.35, strokeOpacity:0.3});
});
}
代码段:
var buildings = {}; buildings['Tinsley'] = { center: new google.maps.LatLng(30.512028, -90.466363), radius: 20, description: "<div>Tinsley Hall</div>", desMaxWidth: 500, }; buildings['Pottle'] = { center: new google.maps.LatLng(30.513184, -90.467562), radius: 40, description: "<div>Pottle Hall</div>", desMaxWidth: 500, }; function initialize() { var southeastern = new google.maps.LatLng(30.5153382, -90.4676681); var mapOptions = { zoom: 17, center: southeastern } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var ctaLayer = new google.maps.KmlLayer({ url: 'http://www.southeastern.edu/_new-resources/includes/slu.kml' }); ctaLayer.setMap(null); var counter = 0; for (var building in buildings) { var buildingCircle = { strokeColor: 'darkgreen', strokeOpacity: 0.3, strokeWeight: 3, clickable: true, fillColor: 'gold', fillOpacity: 0.35, map: map, visible: true, center: buildings[building].center, radius: buildings[building].radius, }; markerCircle = new google.maps.Circle(buildingCircle); attachInfoWindow(map, markerCircle, buildings[building].description); showHideCircle(map, markerCircle); counter++ } } function attachInfoWindow(map, circle, info) { var infowindow = new google.maps.InfoWindow({ content: info }); google.maps.event.addListener(circle, 'click', function(ev) { infowindow.setPosition(circle.getCenter()); infowindow.open(map); }); } function showHideCircle(map, circle) { google.maps.event.addListener(circle, 'mouseout', function() { circle.setOptions({ fillOpacity: 0, strokeOpacity: 0 }); }); google.maps.event.addListener(circle, 'mouseover', function() { circle.setOptions({ fillOpacity: 0.35, strokeOpacity: 0.3 }); }); } google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas" style="border: 2px solid #3872ac;"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.