자동 완성

Question

을 사용하여 맞춤 장소를 설정 한 후 Google지도 마커를 드래그 할 수 없습니다. 사용자가 Google지도의 위치를 ​​선택하기 위해 입력 (장소에 대한 자동 완성 제안 포함)을 사용할 수있는 맞춤 Google지도를 만들려고합니다. 마커를 맵핑하거나 드래그하여 위치를 선택하십시오.

자동 완성 기능이없는지도를 만들면지도의 아이콘이 드래그 가능 상태로 유지됩니다. 하지만 일단 자동 완성 수신기를 추가하면 자동 완성 기능을 한 번 사용하면 마커는 더 이상 드래그 할 수 없습니다.

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

    }); 

모든 솔루션을이 문제에 :

여기 내가 사용하고있어 JS의 코드는?

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&ext=.js"></script> 
 
<input id="pac-input" /> 
 
<div id="map"></div>