在Google地图上显示/隐藏圆圈javascript API [英] show/hide circle on google maps javascript api

问题描述

当用户将鼠标悬停在Google Maps圆上时将其显示，当鼠标悬停时将其隐藏.此代码可在鼠标移出时隐藏圆圈，但在鼠标悬停时不会重新显示圆圈.我还尝试了circle.setMap(null)，然后尝试了circle.setMap(map)，这就是我将地图作为参数传递给showHide函数的原因.

Trying to show a google maps circle when the user hovers over it and hide it when they mouseout. This code works for hiding the circle on mouseout, but doen't reshow the circle on mouseover. I have also tried circle.setMap(null) and then circle.setMap(map) which is the reason I am passing the map as an argument to the showHide function.

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以隐藏圆.

If you want to use mouseover/out, you can't use "visible" or remove the circle from the map. Set the fillOpacity and stokeOpacity to 0 to hide the circle.

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>

这篇关于在Google地图上显示/隐藏圆圈javascript API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！