web-dev-qa-db-de.com

Erfassen Sie die Koordinaten in Google Map auf User Click

Ich verwende diesen Code, um die Koordinaten zu erfassen, wenn der Benutzer auf die Karte klickt, indem der folgende Ereignislistener verwendet wird:

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

Diese Funktion wird jedoch nicht aufgerufen, wenn der Benutzer auf eine bereits markierte Stelle in Map klickt. Dies bedeutet, dass diese Funktion nicht für Punkte aufgerufen wird, an denen der Mauszeiger in Google Map in ein Handsymbol wechselt. 

Benötigen Sie Hilfe bei der Erfassung dieser Art von Orten.

37
Bads123

Sie sollten den Click-Listener auf Marker hinzufügen, um die Position des Markers anzuzeigen.

//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

Edit: Sie brauchen so etwas

//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
45
Ashwin Parmar

Eine andere Lösung besteht darin, ein Polygon mit derselben Größe wie das Kartenrechteck auf der Karte zu platzieren und die Klicks dieser Rechtecke zu erfassen. 

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

Jetzt gibt es auch LatLng's für Sehenswürdigkeiten (und deren Vorlieben).

demo -> http://jsfiddle.net/qmhku4dh/

13
davidkonrad

Sie sprechen von den Point of Interest-Symbolen, die Google auf der Karte platziert.

Würde es für Sie funktionieren, diese Symbole vollständig zu entfernen? Sie können das mit einer Stilkarte tun. Um zu sehen, wie dies aussehen würde, öffnen Sie den Styled Map Wizard und navigieren Sie auf der Karte zu dem Bereich, der Sie interessiert.

Klicken Sie unter Feature-Typ auf Point of Interest und dann unter Elementtyp auf Labels. Klicken Sie schließlich unter Stylers auf Visibility und klicken Sie darunter auf das Optionsfeld Off.

Auf diese Weise sollten alle Point of Interest-Symbole entfernt werden, ohne dass der Rest des Kartenstils beeinflusst wird. Wenn diese verschwunden sind, werden Klicks dort auf Ihren normalen Ereignis-Listener für Kartenklicks reagieren.

Das Feld Map Style rechts sollte Folgendes anzeigen:

Funktionstyp: poi
Elementtyp: Labels
Sichtbarkeit: aus

Wenn das Ergebnis so aussieht, wie Sie es wünschen, klicken Sie unten im Feld Map Style auf Show JSON. Die resultierende JSON sollte dies wie folgt:

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

Sie können dieses JSON (eigentlich ein JavaScript-Objektliteral) mit Code verwenden, der den Beispielen im Entwicklerhandbuch für Stiled Maps ähnelt. Unter MapTypeStyle-Referenz finden Sie eine vollständige Liste der Kartenstile.

4
Michael Geary

Dieses Beispiel zeigt die Verwendung von Klickereignis-Listenern für POIs (Points of Interest). Er wartet auf das Klickereignis auf einem POI-Symbol und verwendet dann die placeId aus den Ereignisdaten mit einer Anweisung von richtungenService.route, um eine Route zum angeklickten Ort zu berechnen und anzuzeigen. Es verwendet auch die placeId, um mehr Details über den Ort zu erhalten.

Lesen Sie die Google-Dokumentation.

 <pre>
<!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>
</pre>
0
Pablo Binotto