Question

当用户使用下面的事件监听器点击地图时，我正在使用此代码捕获坐标：

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

但是，当用户单击Map中已标记的位置时，不会调用此函数。这意味着对于鼠标指针在Google Map上更改为手形图标的点，不会调用此函数。

需要帮助捕获这些位置。

Answer 1

你应该在标记上添加点击监听器，它会给你标记的位置。

//Add listener
google.maps.event.addListener(marker, "click", function (event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    console.log( latitude + ', ' + longitude );
}); //end addListener

编辑：你需要这样的东西

//Add listener
google.maps.event.addListener(marker, "click", function (event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    console.log( latitude + ', ' + longitude );

    radius = new google.maps.Circle({map: map,
        radius: 100,
        center: event.latLng,
        fillColor: '#777',
        fillOpacity: 0.1,
        strokeColor: '#AA0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        draggable: true,    // Dragable
        editable: true      // Resizable
    });

    // Center of map
    map.panTo(new google.maps.LatLng(latitude,longitude));

}); //end addListener

Answer 2

另一种解决方案是在地图上放置一个多边形，与地图矩形的大小相同，并收集此矩形单击。

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.4419, -122.1419),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  google.maps.event.addListener(map, 'bounds_changed', function() {
      var lat1 = 37.41463623043073;
      var lat2 = 37.46915383933881;
      var lng1 = -122.1848153442383;
      var lng2 = -122.09898465576174;  

      var rectangle = new google.maps.Polygon({
         paths : [
           new google.maps.LatLng(lat1, lng1),
           new google.maps.LatLng(lat2, lng1),
           new google.maps.LatLng(lat2, lng2),
           new google.maps.LatLng(lat1, lng2)
         ],
        strokeOpacity: 0,
        fillOpacity : 0,
        map : map
      });
      google.maps.event.addListener(rectangle, 'click', function(args) {  
         console.log('latlng', args.latLng);
    });
  });
}

现在你也可以获得LatLng用于感兴趣的地方（以及他们喜欢的地方）。

演示 - ＆gt;的 http://jsfiddle.net/qmhku4dh/

Answer 3

您正在谈论Google在地图上放置的兴趣点图标。

您是否可以完全删除这些图标？你可以用Styled Map做到这一点。要查看此内容，请打开Styled Map Wizard并将地图导航到您感兴趣的区域。

点击功能类型下的兴趣点，然后点击元素类型下的标签。最后，点击样式管理器下的可见性，然后点击下面的关闭单选按钮。

这应删除所有兴趣点图标，而不会影响地图样式的其余部分。随着那些消失，点击那里将响应您的普通地图点击事件监听器。

右侧的地图样式框应显示：

功能类型： poi
元素类型：标签
可见性：关闭

如果结果符合您的要求，请点击地图样式框底部的显示JSON 。生成的JSON应该是这样的：

[
  {
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

您可以使用与Styled Maps developer's guide中的示例类似的代码来使用该JSON（实际上是JavaScript对象文字）。另请参阅MapTypeStyle reference以获取完整的地图样式列表。

Answer 4

此示例演示了在POI（兴趣点）上使用单击事件侦听器。它在POI图标上侦听click事件，然后将事件数据中的placeId与directionsService.route请求一起使用，以计算并显示到该单击位置的路线。它还使用placeId获取该地点的更多详细信息。

Read the google documentation.

<!DOCTYPE html>
<html>
  <head>
    <title>POI Click Events</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <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;
      }
      .title {
        font-weight: bold;
      }
      #infowindow-content {
        display: none;
      }
      #map #infowindow-content {
        display: inline;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="infowindow-content">
      <img id="place-icon" src="" height="16" width="16">
      <span id="place-name"  class="title"></span><br>
      Place ID <span id="place-id"></span><br>
      <span id="place-address"></span>
    </div>
    <script>
      function initMap() {
        var origin = {lat: -33.871, lng: 151.197};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 18,
          center: origin
        });
        var clickHandler = new ClickEventHandler(map, origin);
      }

      /**
       * @constructor
       */
      var ClickEventHandler = function(map, origin) {
        this.origin = origin;
        this.map = map;
        this.directionsService = new google.maps.DirectionsService;
        this.directionsDisplay = new google.maps.DirectionsRenderer;
        this.directionsDisplay.setMap(map);
        this.placesService = new google.maps.places.PlacesService(map);
        this.infowindow = new google.maps.InfoWindow;
        this.infowindowContent = document.getElementById('infowindow-content');
        this.infowindow.setContent(this.infowindowContent);

        // Listen for clicks on the map.
        this.map.addListener('click', this.handleClick.bind(this));
      };

      ClickEventHandler.prototype.handleClick = function(event) {
        console.log('You clicked on: ' + event.latLng);
        // If the event has a placeId, use it.
        if (event.placeId) {
          console.log('You clicked on place:' + event.placeId);

          // Calling e.stop() on the event prevents the default info window from
          // showing.
          // If you call stop here when there is no placeId you will prevent some
          // other map click event handlers from receiving the event.
          event.stop();
          this.calculateAndDisplayRoute(event.placeId);
          this.getPlaceInformation(event.placeId);
        }
      };

      ClickEventHandler.prototype.calculateAndDisplayRoute = function(placeId) {
        var me = this;
        this.directionsService.route({
          origin: this.origin,
          destination: {placeId: placeId},
          travelMode: 'WALKING'
        }, function(response, status) {
          if (status === 'OK') {
            me.directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      };

      ClickEventHandler.prototype.getPlaceInformation = function(placeId) {
        var me = this;
        this.placesService.getDetails({placeId: placeId}, function(place, status) {
          if (status === 'OK') {
            me.infowindow.close();
            me.infowindow.setPosition(place.geometry.location);
            me.infowindowContent.children['place-icon'].src = place.icon;
            me.infowindowContent.children['place-name'].textContent = place.name;
            me.infowindowContent.children['place-id'].textContent = place.place_id;
            me.infowindowContent.children['place-address'].textContent =
                place.formatted_address;
            me.infowindow.open(me.map);
          }
        });
      };
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
        async defer></script>
  </body>
</html>

Answer 5

如果您将npm load-google-maps-api与webpack结合使用，则对我有用：

  const loadGoogleMapApi = require("load-google-maps-api");
  loadGoogleMapApi({ key: process.env.GOOGLE_MAP_API_KEY }).then(map => {
    let mapCreated = new map.Map(mapElem, {
      center: { lat: lat, lng: long },
      zoom: 7
    });
    mapCreated.addListener('click', function(e) {
      console.log(e.latLng.lat()); // this gives you access to the latitude value of the click
       console.log(e.latLng.lng()); // gives you access to the latitude value of the click
      var marker = new map.Marker({
        position: e.latLng,
        map: mapCreated
      });
      mapCreated.panTo(e.latLng); // finally this adds red marker to the map on click.

    });
  });

接下来，如果您将openweatherMap集成到您的应用中，则可以使用上面在您的api请求中记录的e.latLng.lat（）和e.latLng.lng（）的值。这样：

http://api.openweathermap.org/data/2.5/weather?lat=${e.latLng.lat()}&lon=${e.latLng.lng()}&APPID=${YOUR_API_KEY}

我希望这能对我有所帮助。干杯！

在用户点击的Google Map中捕获坐标

5 个答案: