2

Здравствуйте. Возможно ли как-то с помощью Google Maps Api получить координаты в форму? Например, у меня есть какой-то фрейм с картой, я там ставлю метку, а в мою форму передаются координаты той метки?

Есть код из старого моего проекта. Но тут я ввожу точку А и Б, и между ними рисуется путь, тут я могу вытащить lng и lat. Но могу ли я узнать координаты не вводя точку, и просто передвигать метку на карте?

function GetMap($inCity, $outCity) {
    echo '<center> <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions?origin='.$outCity.'&destination='.$inCity.'&key=ХХХ_CEjbAbKb0Lfqjlk" allowfullscreen></iframe> </center>';
}

$request_params = array('origin' => $out ->street,
                    'destination'=> $in ->street,
                    'key'=>'ХХХ_HHpeZGjfgPpsFTBVPHXu4'
                    );
    $get_params = http_build_query($request_params);
    $str = json_decode(file_get_contents('https://maps.googleapis.com/maps/api/directions/json?'.$get_params));

    foreach ($str->routes[0]->legs[0]->steps as $item) {
    $item->end_location->lng; // узнаем lng
}
2
  • Приведите пример кода, который у вас уже есть. Commented 21 февр. 2018 в 6:52
  • Это применено в инструменте Latitude and Longitude of a Point itouchmap.com/latlong.html
    – user220926
    Commented 21 февр. 2018 в 7:13

2 ответа 2

5
+50

Можно. Рабочий пример внизу.

function updateCoordinates(lat, lng) {
  document.getElementById('lat').value = lat;
  document.getElementById('lng').value = lng;
}

function initMap() {
  var map, marker;
  var myLatlng = {
    lat: 55.74,
    lng: 37.63
  };
  document.getElementById('lat').value = myLatlng.lat;
  document.getElementById('lng').value = myLatlng.lng;

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatlng
  });

  marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true
  });

  marker.addListener('dragend', function(e) {
    var position = marker.getPosition();
    updateCoordinates(position.lat(), position.lng())
  });

  map.addListener('click', function(e) {
    marker.setPosition(e.latLng);
    updateCoordinates(e.latLng.lat(), e.latLng.lng())
  });

  map.panTo(myLatlng);
}
#map {
  margin: 10px;
  height: 400px;
}
<div id="coordinates">
  Click somewhere on the map. Drag the marker to update the coordinates.
</div>
<div>
  <label>
    lat
    <input type="text" id="lat"/>
  </label>
  <label>
    lng
    <input type="text" id="lng"/>
  </label>
</div>

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBbz9SsxmvvV-mXRkRGTH8F4cENndiecOk&libraries=places&callback=initMap" async defer></script>

Пример на JSFiddle

4

Не использовал google API (больше по душе osm и leaflet), но в документации встречается следующая информация:

События пользовательского интерфейса в Google Maps JavaScript API обычно передают свой аргумент, который может быть получен блоком прослушивания событий. Этот аргумент сообщает состояние пользовательского интерфейса на момент события. Например, событие 'click' пользовательского интерфейса обычно передает событие MouseEvent со свойством latLng, обозначающее точку нажатия на карте. Такое поведение характерно только для событий пользовательского интерфейса, при событиях изменения состояния MVC аргументы не передаются.

Следовательно, координаты точки, в которой был совершен клик, можно получить с помощью прослушивания события click на карте:

map.addListener('click', function(e) {
    console.log(e.latLng);
    /* do something */
  });

В общем, надо смотреть в сторону прослушивания событий. Ну и если речь про метку и отслеживание ее перемещений, можно создать перемещаемый маркер (в latLng - какие-нибудь координаты)

marker = new google.maps.Marker({
  position:latLng, 
  map:map,
  draggable:true
); 

и повесить на него обработчик событий. Если интересна конечная точка - событие dragend (когда перемещение маркера закончится):

marker.addListener('dragend', function(e) {
  console.log(e.latLng);
  /* do something */
});

Ну и получить непосредственно lat и lng можно, заменив e.latLng на

e.latLng.lat();
e.latLng.lng();

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.