2017-04-30 1 views
0

Mein Code ist es, eine aktuelle Standortmarkierung für den Benutzer auf Google Maps zu finden, indem Sie auf die Schaltfläche klicken, die Geocode-Funktion erhält die Adressinformationen.Locate Aktuelle Positionsmarkierung

Wie kann ich die Adresse nehmen den aktuellen Standort Wert nicht den Eingabewert?

http://jsfiddle.net/razanrab/WppF6/253/

<body> 
    <div id="panel"> 
     <input id="city_country" type="textbox" value="Berlin, Germany"> 
     <input type="button" value="Geocode" onclick="codeAddress()"> 
    </div> 
    <div id="mapCanvas"></div> 
    <div id="infoPanel"> 
    <b>Marker status:</b> 
    <div id="markerStatus"><i>Click and drag the marker.</i></div> 
    <b>Current position:</b> 
    <div id="info"></div> 
    <b>Closest matching address:</b> 
    <div id="address"></div> 
    </div> 
</body> 


//js 

var geocoder; 
var map; 
var marker; 

codeAddress = function() { 
    geocoder = new google.maps.Geocoder(); 

    var address = document.getElementById('city_country').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map = new google.maps.Map(document.getElementById('mapCanvas'), { 
    zoom: 16, 
      streetViewControl: false, 
      mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
       mapTypeIds:[google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP] 
    }, 
    center: results[0].geometry.location, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

Antwort

1

Um den aktuellen Standort von dem Benutzer zu erhalten, müssen Sie das Geolocation-API verwenden. Bitte beachten Sie die Dokumentation hier:

https://developers.google.com/maps/documentation/javascript/geolocation

if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 
     infoWindow.setContent('Location found.'); 
     infoWindow.open(map); 
     map.setCenter(pos); 
     }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleLocationError(false, infoWindow, map.getCenter()); 
    } 
    } 

Was können Sie tun, ist die Variable oben, po, gesetzt als Standort der Markierung und die Mitte der Karte anstelle des Ergebnisses der geocode Abfrage wie in deiner Probe. Dadurch zentriert sich die Karte um den Standort des Benutzers anstelle des geocodierten Standorts aus dem Textfeld.

Ich war in der Lage, die JSFiddle, die Sie zur Verfügung gestellt haben, zusammen mit meinem eigenen Code und unserer Geolocation-Probe, die ich oben verlinkt habe, zu verwenden. Ich glaube, das ist, was Sie suchen (bitte beachten Sie, dass Sie Ihren eigenen API-Schlüssel in dieses JSFiddle setzen müssen, damit es funktioniert). Es geolocate die Position des Benutzers und erlaubt dem Benutzer, den Marker zu ziehen und Adressinformationen wie gerade zu erhalten in deiner Probe. Dies ermöglicht es dem Benutzer auch die geocode Knopf klicken und haben immer noch die gleiche Funktionalität:

https://jsfiddle.net/45z4841z/1/

Ich hoffe, das hilft!

Verwandte Themen