时间戳

首页 > 解决方案 > 谷歌地图 - 多边形鼠标悬停时的信息窗口

google-maps-api-3 - 谷歌地图 - 多边形鼠标悬停时的信息窗口

问题描述

我在此页面上创建了一个多边形区域

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

<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'
    });

    // 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},
    ];

    // 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);
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_Key&callback=initMap">
</script>

标签： google-maps-api-3

解决方案

向多边形添加一个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;
});

概念证明小提琴

结果地图的屏幕截图

代码片段：

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>

推荐阅读