在谷歌地圖上顯示/隱藏圈子javascript api

Question

當用戶將鼠標懸停在其上並在鼠標懸停時將其隱藏起來時，試圖顯示Google地圖圈子。此代碼適用於在mouseout上隱藏圓圈，但不會在鼠標懸停時重新顯示圓圈。我也嘗試過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); 

Answer 1

如果您要使用鼠標懸停/懸停，您不能使用「可見」或從地圖中刪除該圓圈。將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}); 
    }); 
} 

working fiddle

代碼片段：

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>