在谷歌地图上显示/隐藏圆圈 javascript api

尝试在用户将鼠标悬停在谷歌地图上时显示它，并在鼠标移开时隐藏它。此代码适用于在鼠标移开时隐藏圆圈，但不会在鼠标悬停时重新显示圆圈。我还尝试过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);

如果您想使用鼠标悬停/移出，则不能使用“可见”或从地图上删除圆圈。将填充不透明度和描边不透明度设置为 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});
    });
}

工作小提琴 http://jsfiddle.net/rsjs5qzg/1/

代码片段：

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>