it-swarm.com.de

Breiten- und Längengrad einer ziehbaren PIN über Google Maps API V3 abrufen

Ich werde erklären. Es gelang mir, eine ziehbare Stecknadel auf einer Karte zu haben. Ich möchte die Koordinaten dieses Punktes abrufen und sie in zwei Felder einordnen: Breitengrad und Längengrad. Diese Koordinaten werden später über PHP ..__ an eine SQL-Tabelle gesendet. Hier ist ein Beispiel von dem, was ich vorhabe, aber anstelle von mehreren Pins sind es nur eine und es ist ziehbar. Das Problem ist: Ich kann nicht einmal die Koordinaten des Anfangspunkts anzeigen. Und natürlich, wenn der Benutzer die Nadel bewegt, möchte ich, dass sich die Koordinaten auch in den Feldern ändern. Ich hoffe, ich habe es mir klargemacht. Was habe ich falsch gemacht? Soll ich den Geocoding Dienst verwenden?

Hier geht die JS:

<script type="text/javascript">
  var map;
  function initialize() {
  var myLatlng = new google.maps.LatLng(40.713956,-74.006653);

  var myOptions = {
     zoom: 8,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
     }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

  var marker = new google.maps.Marker({
  draggable: true,
  position: myLatlng, 
  map: map,
  title: "Your location"
  });

  google.maps.event.addListener(marker,'click',function(overlay,point){
     document.getElementById("latbox").value = lat();
     document.getElementById("lngbox").value = lng();
     });

}
</script> 

Und das HTML:

<html>
<body onload="initialize()">

  <div id="map_canvas" style="width:50%; height:50%"></div>

  <div id="latlong">
    <p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p>
    <p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p>
  </div>

</body>
</html>
47
Macxim

Beide arbeiten

google.maps.event.addListener(marker, 'click', function (event) {
    document.getElementById("latbox").value = event.latLng.lat();
    document.getElementById("lngbox").value = event.latLng.lng();
});

google.maps.event.addListener(marker, 'click', function (event) {
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();
});

Sie können auch das Dragend-Ereignis verwenden

google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();
});
78
richie

Schauen Sie sich das offizielle Codebeispiel aus der Google Maps API-Referenz an: http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html

11
George Strakhov

Der Code, der tatsächlich funktioniert, ist der folgende:

google.maps.event.addListener(marker, 'drag', function(event){
       document.getElementById("latbox").value = event.latLng.lat();
       document.getElementById("lngbox").value = event.latLng.lng();
});

Es wäre besser, wenn die Karte nach dem Ablegen der Nadel wieder zentriert werden könnte. Ich denke, es kann mit map.setCenter() gemacht werden, aber ich bin mir nicht sicher, wo ich es ablegen sollte. Ich habe versucht, es vor und direkt nach diesem Code zu schreiben, aber es funktioniert nicht.

4
Macxim

Google Maps V3-Beispiel. Hier ist ein funktionierendes Beispiel für einen Benutzer, der einen einzelnen Pin abbricht und einen abgelegten Pin durch einen neuen Pin ersetzt, benutzerdefinierte Pinbilder und Pins, die Lat/Long-Werte in einem FORM FIELD in einem DIV füllen.

<html>
<body onLoad="initialize()">

  <div id="map_canvas" style="width:50%; height:50%"></div>

  <div id="latlong">
    <p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p>
    <p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p>
  </div>

</body>
</html>

<cfoutput>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=#YOUR-GOOGLE-API-KEY#&sensor=false"></script>
</cfoutput>

<script type="text/javascript">
//<![CDATA[

    // global "map" variable
    var map = null;
    var marker = null;

    // popup window for pin, if in use
    var infowindow = new google.maps.InfoWindow({ 
        size: new google.maps.Size(150,50)
        });

    // A function to create the marker and set up the event window function 
    function createMarker(latlng, name, html) {

    var contentString = html;

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

    google.maps.event.trigger(marker, 'click');    
    return marker;

}

function initialize() {

    // the location of the initial pin
    var myLatlng = new google.maps.LatLng(33.926315,-118.312805);

    // create the map
    var myOptions = {
        zoom: 19,
        center: myLatlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // establish the initial marker/pin
    var image = '/images/googlepins/pin2.png';  
    marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: image,
      title:"Property Location"
    });

    // establish the initial div form fields
    formlat = document.getElementById("latbox").value = myLatlng.lat();
    formlng = document.getElementById("lngbox").value = myLatlng.lng();

    // close popup window
    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

    // removing old markers/pins
    google.maps.event.addListener(map, 'click', function(event) {
        //call function to create marker
         if (marker) {
            marker.setMap(null);
            marker = null;
         }

        // Information for popup window if you so chose to have one
        /*
         marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng);
        */

        var image = '/images/googlepins/pin2.png';
        var myLatLng = event.latLng ;
        /*  
        var marker = new google.maps.Marker({
            by removing the 'var' subsquent pin placement removes the old pin icon
        */
        marker = new google.maps.Marker({   
            position: myLatLng,
            map: map,
            icon: image,
            title:"Property Location"
        });

        // populate the form fields with lat & lng 
        formlat = document.getElementById("latbox").value = event.latLng.lat();
        formlng = document.getElementById("lngbox").value = event.latLng.lng();

    });

}
//]]>

</script> 
4
walker van dyke

Überprüfen Sie diese Geige

Ersetzen Sie im folgenden Code Dragend durch das gewünschte event . In Ihrem Fall 'click'

google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("defaultLatitude").value = event.latLng.lat();
    document.getElementById("defaultLongitude").value = event.latLng.lng();
});
1
Aman Adhikari
google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();
}); 

funktionierte gut für mich .. Danke ..

1
Rolwin C
    var zoomLevel = map.getZoom();
    var pos = (event.latLng).toString();

    $('#position').val(zoomLevel+','+pos); //set value to some input

Beispiellauf JsFiddle

0
user1817927