2016-06-15 11 views
-1

Für eine Umfrage, an der ich arbeite, habe ich diese Karte, die Ihren Standort geocodiert und die Karte an diesem bestimmten Ort zentriert. Durch jQuery bekomme ich sowohl Längen- als auch Breitengrad, um diese Umfragefelder von überall her zu füllen, wo sich das Zentrum in meiner Karte befindet.Dynamisches Reverse Geocoding vom Kartencenter auf Google Maps?

Was ich wissen möchte, ist, wie die Adresse als 3. Poll-Feld hinzufügen und genau wie die Koordinaten, um es dynamisch zu erhalten, wenn sich mein Kartencenter ändert. Ich habe etwas Ähnliches in diesem Beitrag nicht gesehen, wo sie die Adresse dynamisch von einem geschleppt Marker erhalten: How to get the formatted address from a dragged marker in Google Version Maps

Hier können Sie meine Arbeitskarte sehen:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Geolocation Flecker</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
     html, body, #map-canvas { 
 
     height: 100%; 
 
     width: 100%; 
 
     margin: 0px;   
 
     padding: 0px 
 
     } 
 
#map-canvas { 
 
    position: relative; 
 
} 
 

 
#map-canvas:after { 
 
    width: 66px; 
 
    height: 66px; 
 
    display: block; 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    margin: -66px 0 0 -44px; 
 
    background: url('https://storage.googleapis.com/operations_poligone/iconos/Stick01.png'); 
 
    background-size: 88px 66px; 
 
    pointer-events: none; 
 
} 
 
     
 
    </style> 
 

 
    <script src="https://maps.googleapis.com/maps/api/js?V=3.exp&key=AIzaSyDgwY_XXwSE2v-ZCWziaJ6qjuTuiBJck9A 
 
&libraries=visualization&libraries=places"></script> 
 

 
     <script 
 
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 

 
    <script> 
 
     
 
var map; 
 

 
function initialize() { 
 

 
var mapOptions = { 
 
        zoom: 11, 
 
        scrollwheel: true, 
 
        panControl: true, 
 
        zoomControl: true, 
 
        scaleControl: false, 
 
        disableDefaultUI: true, 
 
        center: new google.maps.LatLng(19.038235, -98.219530), 
 
        mapTypeControlOptions: { 
 
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
 
        } 
 
    }; 
 
    
 
map = new google.maps.Map(document.getElementById('map-canvas'), 
 
     mapOptions); 
 
    
 
    
 
     //Retrive the center location 
 
     google.maps.event.addListener(map, "center_changed", function() { 
 
     var lat = map.getCenter().lat(); 
 
     var lng = map.getCenter().lng(); 
 
     $('#lat').val(lat); 
 
     $('#lng').val(lng); 
 
     }); 
 
    
 
    
 
    // Try HTML5 geolocation 
 
    if(navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 
     var pos = new google.maps.LatLng(position.coords.latitude, 
 
             position.coords.longitude); 
 
    document.getElementById('lat').value = position.coords.latitude; 
 
    document.getElementById('lng').value = position.coords.longitude; 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: pos, 
 
     title: 'Ubicación GPS', 
 
    icon:'https://storage.googleapis.com/operations_poligone/iconos/GPS_P06.png', 
 
     animation: google.maps.Animation.BOUNCE 
 
     }); 
 

 
     map.setZoom(16); 
 
     map.setCenter(pos); 
 
    }, function() { 
 
     handleNoGeolocation(true); 
 
    }); 
 
    } else { 
 
    // Browser doesn't support Geolocation 
 
    handleNoGeolocation(false); 
 
    } 
 
} 
 

 
function handleNoGeolocation(errorFlag) { 
 
    if (errorFlag) { 
 
    var content = 'Turn GPS on'; 
 
    } else { 
 
    var content = 'Try with your fingers'; 
 
    } 
 

 
    var options = { 
 
    map: map, 
 
    position: new google.maps.LatLng(19.038235, -98.219530), 
 
    content: content, 
 
    pixelOffset: new google.maps.Size(0,-30) 
 
    }; 
 

 
    var infowindow = new google.maps.InfoWindow(options); 
 
    map.setCenter(options.position); 
 
     
 
}  
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
    </script> 
 
    </head> 
 
    <body> 
 
    <div id="map-canvas"></div> 
 
     <input id="lat"/> 
 
     <input id="lng"/> 
 
     <input id="add"/> 
 
    </body> 
 
</html>

Antwort

0

der hinzufügen geocodePosition Funktion von the linked question, ändern Sie es, um Ihre <input> zu aktualisieren. Ruf es in deiner "center_changed" -Funktion an.

function geocodePosition(pos) { 
    geocoder.geocode({ 
    latLng: pos 
    }, function(responses) { 
    if (responses && responses.length > 0) { 
     $('#add').val(responses[0].formatted_address); 
    } else { 
     $('#add').val('Cannot determine address at this location.'); 
    } 
    }); 
} 

//Retrive the center location 
google.maps.event.addListener(map, "center_changed", function() { 
    var lat = map.getCenter().lat(); 
    var lng = map.getCenter().lng(); 
    $('#lat').val(lat); 
    $('#lng').val(lng); 
    geocodePosition(map.getCenter()) 
}); 

var map; 
 
var geocoder; 
 

 
function initialize() { 
 
    geocoder = new google.maps.Geocoder(); 
 
    var mapOptions = { 
 
    zoom: 11, 
 
    scrollwheel: true, 
 
    panControl: true, 
 
    zoomControl: true, 
 
    scaleControl: false, 
 
    disableDefaultUI: true, 
 
    center: new google.maps.LatLng(19.038235, -98.219530), 
 
    mapTypeControlOptions: { 
 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
 
    } 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 

 
    //Retrive the center location 
 
    google.maps.event.addListener(map, "center_changed", function() { 
 
    var lat = map.getCenter().lat(); 
 
    var lng = map.getCenter().lng(); 
 
    $('#lat').val(lat); 
 
    $('#lng').val(lng); 
 
    geocodePosition(map.getCenter()) 
 
    }); 
 

 

 
    // Try HTML5 geolocation 
 
    if (navigator.geolocation) { 
 
    navigator.geolocation.getCurrentPosition(function(position) { 
 
     var pos = new google.maps.LatLng(position.coords.latitude, 
 
     position.coords.longitude); 
 
     document.getElementById('lat').value = position.coords.latitude; 
 
     document.getElementById('lng').value = position.coords.longitude; 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: pos, 
 
     title: 'Ubicación GPS', 
 
     icon: 'https://storage.googleapis.com/operations_poligone/iconos/GPS_P06.png', 
 
     animation: google.maps.Animation.BOUNCE 
 
     }); 
 

 
     map.setZoom(16); 
 
     map.setCenter(pos); 
 
    }, function() { 
 
     handleNoGeolocation(true); 
 
    }); 
 
    } else { 
 
    // Browser doesn't support Geolocation 
 
    handleNoGeolocation(false); 
 
    } 
 
} 
 

 
function handleNoGeolocation(errorFlag) { 
 
    if (errorFlag) { 
 
    var content = 'Turn GPS on'; 
 
    } else { 
 
    var content = 'Try with your fingers'; 
 
    } 
 

 
    var options = { 
 
    map: map, 
 
    position: new google.maps.LatLng(19.038235, -98.219530), 
 
    content: content, 
 
    pixelOffset: new google.maps.Size(0, -30) 
 
    }; 
 

 
    var infowindow = new google.maps.InfoWindow(options); 
 
    map.setCenter(options.position); 
 

 
} 
 

 
function geocodePosition(pos) { 
 
    geocoder.geocode({ 
 
    latLng: pos 
 
    }, function(responses) { 
 
    if (responses && responses.length > 0) { 
 
     $('#add').val(responses[0].formatted_address); 
 
    } else { 
 
     $('#add').val('Cannot determine address at this location.'); 
 
    } 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#map-canvas { 
 
    position: relative; 
 
} 
 
#map-canvas:after { 
 
    width: 66px; 
 
    height: 66px; 
 
    display: block; 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin: -66px 0 0 -44px; 
 
    background: url('https://storage.googleapis.com/operations_poligone/iconos/Stick01.png'); 
 
    background-size: 88px 66px; 
 
    pointer-events: none; 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="map-canvas"></div> 
 
<input id="lat" /> 
 
<input id="lng" /> 
 
<input id="add" />

+0

Es funktioniert gut, aber ich denke, dass es etwas fehlt, wenn die Karte (pan) bewegt die meisten der Zeit der Adresseingabe sagt _cannot bestimmen address_ Muss ich eine brauchen ** Update-Anweisung ** wie im Referenzbeispiel? Etwas wie dieses: 'google.maps.event.addListener (Markierung, 'dragend', Funktion() { updateMarkerStatus ('ziehen beendete'); geocodePosition (marker.getPosition()); });' @geocodezip –

+0

Wenn der umgekehrte Geocodierer kein Ergebnis finden kann, ist dies der Code in diesem Beispiel. Die meisten Orte, die ich gesehen habe, waren mitten in Parks (wo ich nicht überrascht war, das zu sehen). – geocodezip

Verwandte Themen