Stellen Sie den Standort anhand der Adresse oder durch Setzen einer Markierung ein

Question

Ich erstelle ein benutzerdefiniertes Formular für den Kunden. Sie möchten den Standort für Häuser festlegen, die sie über diese Form hinzufügen.

Ich brauche zwei Optionen zum Hinzufügen eines Standortes. Eine ist, indem Sie die Adresse in das Suchfeld auf Google Maps eingeben und wenn ich die Enter-Markierung drücke, wird die Karte hinzugefügt.

Ein anderer Weg ist, Marker mit der Maus zu bewegen, und in diesem Fall muss die Adresse durch die Position des Markers aktualisiert werden.

Nur ein Marker (eine Adresse) kann auf der Karte sein.

Alle guten Beispiele oder beraten?

Dank

Answer 1

ich dir es eine Arbeitsprobe der Funktionalitäten geben Sie beschrieben haben. Aber Sie werden derjenige sein, der das Konzept in Ihre eigene Form integriert.

Einer ist durch Eingabe der Adresse in das Suchfeld auf Google Maps und wenn ich drücke Enter-Marker wird der Karte hinzugefügt werden. Hier ist die jsfiddle demo. Innerhalb der searchBox.addListener('places_changed', function(e) {} Listener, stelle ich eine Funktion, um eine Markierung zu erstellen. Wenn dieser Listener ausgelöst wird, weil der Benutzer auf die vorhergesagte Adresse klickt, wird an derselben Stelle eine Markierung platziert. Dies funktioniert nicht, wenn Sie bestimmte Gebäudenamen eingeben. Es muss eine Adresse sein.

Eine andere Möglichkeit besteht darin, den Marker mit der Maus zu bewegen. In diesem Fall muss die Adresse durch die Position des Markers aktualisiert werden.

Hier ist die jsfiddle demo. In dieser Demo starten Sie, indem Sie den Marker irgendwo auf der Karte ziehen. Wenn das Ziehereignis endet, 'dragend', wird das Infofenster mit der aktuellen Adresse gefüllt, in der sich der Marker befindet.

Vergessen Sie nicht, mehr unter Javascript Map samples zu lesen.

Answer 2

JS-Code:

function initAutocomplete() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 62, lng: 15}, 
    zoom: 5, 
    mapTypeId: 'roadmap' 
    }); 

    // Create the search box and link it to the UI element. 
    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    // Bias the SearchBox results towards current map's viewport. 
    map.addListener('bounds_changed', function() { 
    searchBox.setBounds(map.getBounds()); 
    }); 

    // Create a marker for each place. 
    marker = new google.maps.Marker({ 
    map: map, 
    draggable: true, 
    title: 'Starting location', 
    position: {lat: 62, lng: 15} 
    }); 

    google.maps.event.addListener(marker, 'dragend', function() 
    { 
    document.getElementById('inputHousesLongitude').value = marker.getPosition().lat(); 
    document.getElementById('inputHousesLatitude').value = marker.getPosition().lng(); 
    geocodePosition(marker.getPosition()); 
    }); 

    // Listen for the event fired when the user selects a prediction and retrieve 
    // more details for that place. 
    searchBox.addListener('places_changed', function() { 
    var places = searchBox.getPlaces(); 

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

    // For each place, get the icon, name and location. 
    var bounds = new google.maps.LatLngBounds(); 
    places.forEach(function(place) { 
    if (!place.geometry) { 
    console.log("Returned place contains no geometry"); 
    return; 
    } 
    var icon = { 
    url: place.icon, 
    size: new google.maps.Size(71, 71), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(17, 34), 
    scaledSize: new google.maps.Size(10, 10) 
    }; 

    document.getElementById('inputHousesLongitude').value = place.geometry.location.lat(); 
    document.getElementById('inputHousesLatitude').value = place.geometry.location.lng(); 
    document.getElementById('inputHousesAddress').value = place.name; 

    marker.setPosition(place.geometry.location); 

    if (place.geometry.viewport) { 
    // Only geocodes have viewport. 
    bounds.union(place.geometry.viewport); 
    } else { 
    bounds.extend(place.geometry.location); 
    } 
    }); 
    map.fitBounds(bounds); 
    }); 
    } 

function geocodePosition(pos) 
{ 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode 
    ({ 
    latLng: pos 
    }, 
    function(results, status) 
    { 
    if (status == google.maps.GeocoderStatus.OK) 
    { 
    document.getElementById('pac-input').value = results[0].formatted_address; 
    document.getElementById('inputHousesAddress').value = results[0].formatted_address; 
    } 
    else 
    { 
    $("#mapErrorMsg").html('Cannot determine address at this location.'+status).show(100); 
    } 
    } 
    ); 
    } 

HTML:

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

CSS:

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
#map { 
    height: 400px; 
} 
.controls { 
    margin-top: 10px; 
    border: 1px solid transparent; 
    border-radius: 2px 0 0 2px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    height: 32px; 
    outline: none; 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
} 

#pac-input { 
    background-color: #fff; 
    font-family: Roboto; 
    font-size: 15px; 
    font-weight: 300; 
    margin-left: 12px; 
    padding: 0 11px 0 13px; 
    text-overflow: ellipsis; 
    width: 300px; 
} 

#pac-input:focus { 
    border-color: #4d90fe; 
} 

.pac-container { 
    font-family: Roboto; 
} 

#type-selector { 
    color: #fff; 
    background-color: #4d90fe; 
    padding: 5px 11px 0px 11px; 
} 

#type-selector label { 
    font-family: Roboto; 
    font-size: 13px; 
    font-weight: 300; 
} 
#target { 
    width: 345px; 
}