Google Maps Marker kann nicht verschoben werden, nachdem ein benutzerdefinierter Ort mit Autocomplete festgelegt wurde

Question

Also versuche ich eine benutzerdefinierte Google Map zu erstellen, wo der Benutzer entweder die Eingabe (mit automatischen Vervollständigungsvorschlägen für Orte) verwenden kann, um die Position in der Zeichnen Sie den Marker auf oder ziehen Sie ihn, um die Position auszuwählen.

Wenn ich eine Karte ohne Autocomplete-Funktion erstelle, bleibt der Marker auf der Karte ziehbar. Aber sobald ich den Autocomplete-Listener hinzufüge, wenn die Autocomplete-Funktion einmal verwendet wird, bleibt der Marker nicht mehr ziehbar.

Hier ist der JS-Code, ich verwende:

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

    }); 

Irgendwelche Lösungen zu diesem Thema?

Answer 1

Es sieht aus, als ob Sie die .setPlace() Methode des Markers verwenden, ist es nicht ziehbar.

Verwenden Sie stattdessen die Methode .setPosition().

ersetzen:

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

mit:

marker.setPosition(place.geometry.location); 

proof of concept fiddle

Code-Schnipsel:

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>