Google Maps API erhalten lat und lng dynamisch

Wenn ich meinen Code ausführen, wird die Karte nicht angezeigt. Ich arbeite an meinem localhost. Ich möchte lat und lng auf Eingaben setzen. Wenn ich lat und lng ändere, ändern sich die Eingänge dynamisch. Wie kann ich dieses Problem lösen?Google Maps API erhalten lat und lng dynamisch

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
</head> 
<body> 
<div id="googleMap" style="width:500px;height:500px;"></div> 
Lat: <input type="text" id="lat"><br> 
Lng: <input type="text" id="lng"> 
<script type="text/javascript"> 
function initialize() { 
    var myLatlng = new google.maps.LatLng(41,28); 
    var myOptions = { 
     zoom: 15, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("googleMap"), myOptions); 
    addMarker(myLatlng, 'Default Marker', map); 
    map.addListener('click',function(event) { 
     addMarker(event.latLng, 'Click Generated Marker', map); 
    ); 
}} 
function addMarker(latlng,title,map) { 
    var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      title: title, 
      draggable:true 
    }); 
    marker.addListener('drag',function(event) { 
     $('#lat').val() = event.latLng.lat(); 
     $('#lng').val() = event.latLng.lng(); 
    }); 
    marker.addListener('dragend',function(event) { 
     $('#lat').val() = event.latLng.lat(); 
     $('#lng').val() = event.latLng.lng(); 
    });} 
</script> 
</body></html>

Quelle

2016-04-28 Fatih Doğan

Bitte beschreiben Sie das Problem besser. Die Karte wird nicht angezeigt? Die Eingänge werden nicht aktualisiert? Was ist das Problem? Irgendein Fehler in deiner Javascript-Konsole? – MrUpsidown

Sie haben einige Fehler in Ihrem Code .. und Sie rufen die Funktion initialize(). Versuchen Sie, diese aktualisierten Code

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
</head> 
<body> 
<div id="googleMap" style="width:500px;height:500px;"></div> 
Lat: <input type="text" id="lat"><br> 
Lng: <input type="text" id="lng"> 
<script type="text/javascript"> 
function initialize() { 
    var myLatlng = new google.maps.LatLng(41,28); 
    var myOptions = { 
     zoom: 15, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("googleMap"), myOptions); 
    addMarker(myLatlng, 'Default Marker', map); 
    map.addListener('click',function(event) { 
     addMarker(event.latLng, 'Click Generated Marker', map); 
    }); 
} 
function addMarker(latlng,title,map) { 
    var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      title: title, 
      draggable:true 
    }); 
    marker.addListener('drag',function(event) { 
     $('#lat').val(event.latLng.lat()) ; 
     $('#lng').val(event.latLng.lng()) ; 
    }); 
    marker.addListener('dragend',function(event) { 
     $('#lat').val(event.latLng.lat()) ; 
     $('#lng').val(event.latLng.lng()) ; 
    }); 
} 
initialize(); 
</script> 
</body></html>

Quelle

2016-04-29 07:26:10 sarath

danke für Hilfe. es funktioniert. –

Willkommen ........ :) – sarath

Auch ich habe eine andere Frage. Wie kann ich ausgewählte Koordinaten speichern? Zum Beispiel verschiebe ich den Marker um eine Koordinate. Ich möchte in Array oder Div speichern. Tatsächlich möchte ich Geschichte besuchen. –

Hier kann ich ausgewählte Koordinaten speichern. Es kann jemandem helfen.

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
</head> 
<body> 
<div id="googleMap" style="width:500px;height:500px;"></div> 
Lat: <input type="text" id="lat"><br> 
Lng: <input type="text" id="lng"> 
<p id="results">result</p> 
<script type="text/javascript"> 

function initialize() { 
    var myLatlng = new google.maps.LatLng(41.015137,28.979530); 
    var myOptions = { 
     zoom: 10, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("googleMap"), myOptions); 
    addMarker(myLatlng, 'Default Marker', map); 
    map.addListener('click',function(event) { 
     addMarker(event.latLng, 'Click Generated Marker', map); 
    }); 
} 
function addMarker(latlng,title,map) { 
    var coords = []; 
    var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      title: title, 
      draggable:true 
    }); 
    marker.addListener('drag',function(event) { 
     $('#lat').val(event.latLng.lat()) ; 
     $('#lng').val(event.latLng.lng()) ; 

    }); 
    marker.addListener('dragend',function(event) { 
     $('#lat').val(event.latLng.lat()) ; 
     $('#lng').val(event.latLng.lng()) ; 
     coords.push(event.latLng.lat()); 
     coords.push(event.latLng.lng()); 
     $("#results").append('<div>'+JSON.stringify(coords)+'</div>'); 
     coords = []; 
    }); 
} 
initialize(); 
</script> 
</body></html>

Quelle

2016-04-29 08:26:00

Google Maps API erhalten lat und lng dynamisch

Antwort

Verwandte Themen