it-swarm.com.ru

Захват координат в Google Map по клику пользователя

Я использую этот код для захвата координат, когда пользователь нажимает на карту с помощью прослушивателя событий ниже:

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

Однако эта функция не вызывается, когда пользователь нажимает на уже отмеченное место на карте .... Это означает, что эта функция не вызывается для точек, где указатель мыши меняется на значок руки на карте Google. 

Нужна помощь в захвате таких мест.

37
Bads123

Вы должны добавить прослушиватель щелчка на маркере, который даст вам положение маркера.

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

Другое решение состоит в том, чтобы поместить многоугольник поверх карты, того же размера, что и прямоугольник карты, и собирать щелчки по этим прямоугольникам. 

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 для достопримечательностей (и их лайков).

демо -> http://jsfiddle.net/qmhku4dh/

13
davidkonrad

Вы говорите о значках точек интереса, которые Google наносит на карту.

Будет ли работать для вас, чтобы удалить эти значки полностью? Вы можете сделать это с помощью стилизованной карты. Чтобы увидеть, как это будет выглядеть, откройте Styled Map Wizard и перейдите к нужной области.

Нажмите Достопримечательность в Тип объекта, а затем нажмите Метки в Тип элемента. Наконец, нажмите Visibility в Stylers и нажмите переключатель Off под этим.

Это должно удалить все значки точек интереса, не затрагивая остальную часть стиля карты. Если все прошло, то клики будут реагировать на ваш прослушиватель событий щелчков на карте.

Поле Map Style справа должно показывать:

Тип объекта: poi
Тип элемента: метки
Видимость: выключен

Если результат выглядит так, как вы хотите, нажмите Показать JSON в нижней части поля Map Style. Полученный JSON должен выглядеть так:

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

Вы можете использовать этот JSON (на самом деле литерал объекта JavaScript), используя код, подобный примерам в Руководство разработчика Styled Maps . Также см. MapTypeStyle справочник для полного списка стилей карты.

4
Michael Geary

В этом примере демонстрируется использование прослушивателей событий click для POI (точек интереса). Он прослушивает событие click на значке POI, а затем использует placeId из данных события с запросом directionsService.route для расчета и отображения маршрута к выбранному месту. Он также использует placeId, чтобы получить более подробную информацию о месте.

Прочитайте документацию Google.

 <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