当我将鼠标悬停在多边形或折线上时，如何使鼠标位置显示在鼠标位置？

Question

我需要编辑 infowindow 的位置，以便当我将鼠标悬停在多边形（绿色区域）而不是左上角时显示鼠标的位置角。我该怎么办？

我已经尝试infowindow.set_positionevent.latLng)但它没有用，而且infowindow根本没有显示。

var infowindow_polygon_1 = new google.maps.InfoWindow({content: '<h1>polygon</h1><br/><a href="http://www.google.com/">google</a>"'});
google.maps.event.addListener(flightPath_2,"mouseover",function(){
 this.setOptions({fillColor: "#00FF00"});
  infowindow_polygon_1.setPosition(event.latLng);
    infowindow_polygon_1.open(map);
}); 

<h1>My First Google Map</h1>

<div id="map" style="width:100%;height:500px"></div>

<script>
  function myMap() {
    var mapCanvas = document.getElementById("map");
    var mapOptions = {
      center: new google.maps.LatLng(51.508742, -0.120850),
      zoom: 5
    };

    var map = new google.maps.Map(mapCanvas, mapOptions);

    var wellIcon = {
      // url: "well.png", // url
      scaledSize: new google.maps.Size(20, 20), // scaled size
      origin: new google.maps.Point(0, 0), // origin
      anchor: new google.maps.Point(0, 0) // anchor
    };

    var raisaCairo = new google.maps.LatLng(29.957252, 31.275634);
    var libya = new google.maps.LatLng(27.195036247666614, 18.10546875);
    var ireland_1 = new google.maps.LatLng(55.26597215355588, -12.7001953125);
    var ireland_2 = new google.maps.LatLng(55.91165733399104, -5.361328125);
    var ireland_3 = new google.maps.LatLng(50.58253919582843, -10.5029296875);
    var ireland_4 = new google.maps.LatLng(52.33466792329363, -4.5263671875);
    var stavanger = new google.maps.LatLng(58.983991, 5.734863);
    var amsterdam = new google.maps.LatLng(52.395715, 4.888916);
    var london = new google.maps.LatLng(51.508742, -0.120850);
    var sep_1 = new google.maps.LatLng(44.22866952759539, -2.8125);
    var sep_2 = new google.maps.LatLng(42.211431145149, 4.3945312);



    var wellMarker = new google.maps.Marker({
      position: raisaCairo,
      icon: wellIcon
    });
    wellMarker.setMap(map);

    var infowindow_wellMarker = new google.maps.InfoWindow({
      content: "Well"
    });

    google.maps.event.addListener(wellMarker, 'click', function() {
      map.setZoom(6);
      map.setCenter(wellMarker.getPosition());
      infowindow_wellMarker.open(map, wellMarker);
    });
    //////////////////////////////////




    var wellMarker_1 = new google.maps.Marker({
      position: libya,
      icon: wellIcon
    });
    wellMarker_1.setMap(map);

    var infowindow_wellMarker_1 = new google.maps.InfoWindow({
      content: "Well"
    });

    google.maps.event.addListener(wellMarker_1, 'click', function() {
      map.setZoom(6);
      map.setCenter(wellMarker_1.getPosition());
      infowindow_wellMarker_1.open(map, wellMarker_1);
    });



    //////////////////////////////////

    google.maps.event.addListener(wellMarker, 'mouseover', function() {
      infowindow_wellMarker.open(map, wellMarker);
    });
    google.maps.event.addListener(wellMarker, 'mouseout', function() {
      infowindow_wellMarker.close(map, wellMarker);
    });

    google.maps.event.addListener(wellMarker_1, 'mouseover', function() {
      infowindow_wellMarker_1.open(map, wellMarker);
    });
    google.maps.event.addListener(wellMarker_1, 'mouseout', function() {
      infowindow_wellMarker_1.close(map, wellMarker);
    });


    //////////////////////////////////////////////////////////////////////////////
    var flightPath = new google.maps.Polyline({
      path: [stavanger, amsterdam, london],
      strokeColor: "#FF00FF",
      strokeOpacity: 0.5,
      strokeWeight: 5
    });
    flightPath.setMap(map);


    var sep = new google.maps.Polyline({
      path: [sep_1, sep_2],
      strokeColor: "#F0000F",
      strokeOpacity: 1,
      strokeWeight: 10
    });
    sep.setMap(map);
    //////////////////////////////////////////////////////////////////////////////

    var flightPath_2 = new google.maps.Polygon({
      path: [stavanger, amsterdam, raisaCairo],
      strokeColor: "#000000",
      strokeOpacity: 0.4,
      strokeWeight: 5,
      fillColor: "#00FF00",
      fillOpacity: 0.3
    });
    flightPath_2.setMap(map);


    var irland = new google.maps.Polygon({
      path: [ireland_1, ireland_3, ireland_4, ireland_2],
      strokeColor: "#000000",
      strokeOpacity: 0.9,
      strokeWeight: 10,
      fillColor: "#0FFFF0",
      fillOpacity: 0.7
    });

    irland.setMap(map);

    ////////////////////////////////////////////////////////////////////////////////////////
    //event

    var infowindow_polygon_1 = new google.maps.InfoWindow({
      content: '<h1>polygon</h1><br/><a href="http://www.google.com/">google</a>"'
    });
    google.maps.event.addListener(flightPath_2, "mouseover", function() {
      this.setOptions({
        fillColor: "#00FF00"
      });

      infowindow_polygon_1.open(map);
      infowindow_polygon_1.setPosition(event.latLng);
    });

    google.maps.event.addListener(flightPath_2, "mouseout", function() {
      this.setOptions({
        fillColor: "#FF0000"
      });
      infowindow_polygon_1.close(map);
    });

    //event
    var infowindow_polygon_2 = new google.maps.InfoWindow({
      content: "<h2>polyline</h2>"
    });


    google.maps.event.addListener(flightPath, "mouseover", function() {
      this.setOptions({
        strokeColor: "#00FF00"
      });

      infowindow_polygon_2.open(map);
      infowindow_polygon_2.setPosition(event.latLng);
    });

    google.maps.event.addListener(flightPath, "mouseout", function() {
      this.setOptions({
        strokeColor: "#FF0000"
      });
      infowindow_polygon_2.close(map);
    });


    ///on click
    var marker_1 = [];
    var infowindow_1 = [];
    //event 
    function placeMarker(map, location) {
      marker_1 = new google.maps.Marker({
        position: location,
        map: map
      });
      infowindow_1 = new google.maps.InfoWindow({
        content: 'Latitude: ' + location.lat() + '<br/>Longitude: ' + location.lng() + '<br/><input type="button" id="btn" value="click" onclick="removeMarker()"/><br/><a href="http://www.google.com/">google</a>'
      });
      infowindow_1.open(map, marker_1);
    }

    google.maps.event.addListener(map, 'click', function(event) {
      placeMarker(map, event.latLng);
    });



  }


  function removeMarker() {

    alert('it works');
  }
</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Answer 1

看起来您正在尝试使用event变量而不将其传递给回调函数。

而不是：

google.maps.event.addListener(flightPath_2,"mouseover",function(/* missed the event variable */){

这样做：

google.maps.event.addListener(flightPath_2,"mouseover",function(event){

其他一切看起来都不错。

这是一个完全相同的演示（另一个，不是你的）：

＆＃13;

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polygon</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
      * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      // This example creates a simple polygon representing the Bermuda Triangle.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: {lat: 24.886, lng: -70.268},
          mapTypeId: 'terrain'
        });

        // Define the LatLng coordinates for the polygon's path.
        var triangleCoords = [
          {lat: 25.774, lng: -80.190},
          {lat: 18.466, lng: -66.118},
          {lat: 32.321, lng: -64.757},
          {lat: 25.774, lng: -80.190}
        ];

        // Construct the polygon.
        var bermudaTriangle = new google.maps.Polygon({
          paths: triangleCoords,
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35
        });
        bermudaTriangle.setMap(map);

        var infowindow_polygon_1 = new google.maps.InfoWindow({content: '<h1>polygon</h1><br/><a href="http://www.google.com/">google</a>"'});
        google.maps.event.addListener(bermudaTriangle,"mouseover",function(event){
          this.setOptions({fillColor: "#00FF00"});
          infowindow_polygon_1.setPosition(event.latLng);
          infowindow_polygon_1.open(map);
        }); 
      }
    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </body>
</html>

＆＃13;

＆＃13;

＆＃13;

http://output.jsbin.com/jatibe

Answer 2

您可以将infowindow链接到对象，例如：用于标记

  marker.addListener('mouseover', function() {
      infowindow.open(map, this);
  });

//并且当用户鼠标离开对象时隐藏信息窗

  marker.addListener('mouseout', function() {
      infowindow.close();
  });

对于polygon，您还可以使用事件侦听器

google.maps.event.AddListener("mouseover", polygon, function() {
   infoWindow.setPosition(latLng)
   infoWindow.open(map)

})
google.maps.event.AddListener("mouseout", polygon, function() {
    infoWindow.close()
})