Google Maps-多边形的鼠标悬停时的infoWindow

Question

我在this page上创建了一个多边形区域

我需要创建一个信息窗口，将鼠标悬停时打开。我在鼠标单击标记而不是在多边形区域上找到了打开信息窗口的信息。

nobody

Answer 1

您将mouseover事件添加到div ID“地图”

JavaScript代码：

//Select html element
const mapInfo = document.querySelector("#map");

//add mouseover event to the selected element 
mapInfo.addEventListener ('mouseover', initMap);

访问此https://developers.google.com/maps/documentation/javascript/infowindows链接以获取更多信息。我希望这会有所帮助。

Answer 2

将mouseover和mouseout事件添加到多边形：

function mousefn(evt) {
  infowindow.setContent("polygon<br>coords:" + bounds.getCenter().toUrlValue(6));
  infowindow.setPosition(bounds.getCenter()); // or evt.latLng
  infowindow.open(map);
}
google.maps.event.addListener(mrpdPolygon, 'mouseover', mousefn);
google.maps.event.addListener(mrpdPolygon, 'mouseout', function(evt) {
  infowindow.close();
  infowindow.opened = false;
});

proof of concept fiddle

代码段：

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="map"></div>
<script>
  // This is a simple polygon representing the MRPD Rescue Zone.

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: {
        lat: -16.4836,
        lng: 145.4653
      },
      mapTypeId: 'terrain'
    });
    // Construction of polygon.
    var mrpdPolygon = new google.maps.Polygon({
      paths: polygonCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.6,
      strokeWeight: 1,
      fillColor: '#FF0000',
      fillOpacity: 0.10
    });
    mrpdPolygon.setMap(map);
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < mrpdPolygon.getPath().getLength(); i++) {
      bounds.extend(mrpdPolygon.getPath().getAt(i));
    }

    var infowindow = new google.maps.InfoWindow();
    infowindow.opened = false;

    function mousefn(evt) {
      infowindow.setContent("polygon<br>coords:" + bounds.getCenter().toUrlValue(6));
      infowindow.setPosition(bounds.getCenter());
      infowindow.open(map);
    }
    google.maps.event.addListener(mrpdPolygon, 'mouseover', mousefn);
    // google.maps.event.addListener(mrpdPolygon, 'mousemove', mousefn);
    google.maps.event.addListener(mrpdPolygon, 'mouseout', function(evt) {
      infowindow.close();
      infowindow.opened = false;
    });
  }

  // Definition of the LatLng coordinates for the polygon's path.
  var polygonCoords = [{
      lat: -16.4836,
      lng: 145.4653
    },
    {
      lat: -16.4500,
      lng: 145.4133
    },
    {
      lat: -16.2319,
      lng: 145.4763
    },
    {
      lat: -16.0878,
      lng: 145.4548
    },
    {
      lat: -16.0454,
      lng: 145.9000
    },
    {
      lat: -16.4861,
      lng: 146.1269
    },
    {
      lat: -16.7229,
      lng: 145.6500
    },
    {
      lat: -16.5913,
      lng: 145.5192
    },
  ];
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>