Google 使用自动完成设置自定义地点后，地图标记不再保持可拖动状态

Question

所以我正在尝试制作一个自定义 Google 地图，用户可以使用输入（带有地点的自动完成建议）到 select 地图中的位置或拖动标记到 select 的位置。

当我创建没有自动完成功能的地图时，地图上的标记仍然可以拖动。但是一旦我添加了自动完成侦听器，一旦使用了自动完成功能，标记就不再保持可拖动状态。

这是我正在使用的 JS 代码：

defaultLatLong = {lat: xxxx lng: xxxx};

var map = new google.maps.Map(document.getElementById('map'), {
  center: defaultLatLong,
  zoom: 13,
  mapTypeId: 'roadmap'
});

var input = document.getElementById('pac-input');

var autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.bindTo('bounds',map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

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

google.maps.event.addListener(marker, 'dragend', function(marker){
    var latLng = marker.latLng;
    currentLatitude = latLng.lat();
    currentLongitude = latLng.lng();
    var latlng = {lat: currentLatitude, lng: currentLongitude};
    var geocoder = new google.maps.Geocoder;
    geocoder.geocode({'location': latlng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {
              input.value = results[0].formatted_address;
            } else {
              window.alert('No results found');
            }
          } else {
            window.alert('Geocoder failed due to: ' + status);
          }
        });
});

autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      return;
    }
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
    }

    marker.setPlace({
      placeId: place.place_id,
      location: place.geometry.location
    });

    currentLatitude = place.geometry.location.lat();
    currentLongitude = place.geometry.location.lng();

  });

这个问题有什么解决方案吗？

Answer 1

看起来如果您使用标记的 .setPlace() 方法，它就不可拖动。

改用 .setPosition() 方法。

替换：

marker.setPlace({
  placeId: place.place_id,
  location: place.geometry.location
});

与：

marker.setPosition(place.geometry.location);

proof of concept fiddle

代码片段：

defaultLatLong = {
  lat: 40.7127753,
  lng: -74.0059728
};

var map = new google.maps.Map(document.getElementById('map'), {
  center: defaultLatLong,
  zoom: 13,
  mapTypeId: 'roadmap'
});

var input = document.getElementById('pac-input');

var autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

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

google.maps.event.addListener(marker, 'dragend', function(marker) {
  var latLng = marker.latLng;
  currentLatitude = latLng.lat();
  currentLongitude = latLng.lng();
  var latlng = {
    lat: currentLatitude,
    lng: currentLongitude
  };
  var geocoder = new google.maps.Geocoder;
  geocoder.geocode({
    'location': latlng
  }, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        input.value = results[0].formatted_address;
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
});

autocomplete.addListener('place_changed', function() {
  var place = autocomplete.getPlace();
  if (!place.geometry) {
    return;
  }
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
  }

  marker.setPosition(place.geometry.location);

  currentLatitude = place.geometry.location.lat();
  currentLongitude = place.geometry.location.lng();

});

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="pac-input" />
<div id="map"></div>

Google 使用自动完成设置自定义地点后，地图标记不再保持可拖动状态

Google Maps Marker doesn't remain draggable after setting a Custom Place using Autocomplete

javascript

google-maps

google-maps-markers

google-places-api