从可拖动的推送标记（放置搜索框）获取经纬度

Question

用户必须在注册表单上选择他们的位置，我使用的是地点搜索框。
对于以后的应用程序，我需要精确的纬度和经度，因此我需要一个可拖动的标记。

我提供了 Plunker

已经尝试过各种组合但没有成功，例如：

google.maps.event.addListener(markers, 'dragend', function (event) {
    document.getElementById("lat").value = event.latLng.lat();
    document.getElementById("lng").value = event.latLng.lng();

    $('#lat').val(event.latLng.lat())  ;
    $('#lng').val(event.latLng.lng())  ;


});

经纬度框不会在拖动时更新。听众被忽略。

编辑附加信息："markers" 是我创建的标记的变量。
#lat、#lng 是隐藏输入字段的 ID。

EDIT2: 我从 plunker 中清除了我的整个代码，只用了这个问题的必要代码:

var inputradius = document.getElementById('myRange');
function initAutocomplete() {

  var CenterToCountry = {lat: 50.9725, lng: 11.4804};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: CenterToCountry,
    zoom: 6,
    mapTypeId: 'roadmap',
    streetViewControl: false,
    mapTypeControl: false
  });

  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

  var markers = [];

  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length === 0) {
      return;
    }

    markers.forEach(function(marker) {
      marker.setMap(null);
    });

    markers = [];

    var bounds = new google.maps.LatLngBounds();

    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }


      markers.push(new google.maps.Marker({
        map: map,
        title: place.name,
        draggable:true,
        position: place.geometry.location
      }));


      var location = place.geometry.location;
      var lat = location.lat();
      var lng = location.lng();

      document.getElementById("lat").value = lat;
      document.getElementById("lng").value = lng;

      if (place.geometry.viewport) {
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }

    map.fitBounds(bounds);
  });
});


               google.maps.event.addListener(markers, 'dragend', function () {
                var lat = markers.getPosition().lat();
                var lng = markers.getPosition().lng();


                $('#lat').val(lat);
                $('#lng').val(lng);
            });



}

Answer 1

您好，您可以在代码中使用 places_changed 事件，

google.maps.event.addListener(searchBox, 'places_changed', function () {
....
...
var places = searchBox.getPlaces();
for (var i = 0, place; place = places[i]; i++) {

    $('#MAP_LAT').val(place.geometry.location.lat());
    $('#MAP_LNG').val(place.geometry.location.lng());
}

或

google.maps.event.addListener(markers, 'dragend', function (event) {
    document.getElementById("lat").value = markers.getPosition().lat();
    document.getElementById("lng").value = markers.getPosition().lng();
});

注意我没试过。

我已经测试过了，代码在下面，我认为你不能正确获取标记变量或者我创建标记它并且可以处理它；

 if ($('#MAP_LAT').val() > 0 && $('#MAP_LNG').val() > 0) {
            markerNew = new google.maps.Marker({
                position: {lat: parseFloat($('#MAP_LAT').val()), lng: parseFloat($('#MAP_LNG').val())},//event.latLng,//
                map: map,
                icon: '../maps/GoogleMapsMarkers/original/red_MarkerH.png',
                title: 'My Marker',
                draggable: true,
                animation: google.maps.Animation.DROP
            });
            google.maps.event.addListener(markerNew, 'dragend', function () {
                var lat = markerNew.getPosition().lat();
                var lng = markerNew.getPosition().lng();
                $('#MAP_LAT').val(lat);
                $('#MAP_LNG').val(lng);
            });
        }

我找到了，这就是我认为你不能使用标记变量的原因，它是编辑你的 plunker 代码 screenshot your plunker code after edited

您可以看到用于测试的整个 plunker 代码，请在您的函数之后添加此代码 "places.forEach(function(place) {"

  console.log(markers);
  if(markers != null){
  google.maps.event.addListener(markers[0], 'dragend', function () {

  var lat = markers[0].getPosition().lat();
  var lng = markers[0].getPosition().lng();
  console.log(lat);
  });
  }

,享受

从可拖动的推送标记（放置搜索框）获取经纬度

Get lat and lng from draggable pushed marker (places search box)

javascript

google-maps

google-maps-api-3

google-maps-markers