Récupérer la latitude et la longitude d'un déplaçable pin via Google Maps API V3

Je vais vous expliquer. J'ai réussi à avoir un déplaçable broches sur une carte. Je veux récupérer les coordonnées de ce point et de les mettre dans deux domaines: la Latitude et la Longitude. Ces coordonnées seront ensuite envoyer à un table SQL via PHP.
Voici un exemple de ce que j'ai l'intention de faire, mais au lieu de plusieurs broches, c'est juste et c'est déplaçable. Le problème est: je ne suis même pas capable d'afficher les coordonnées du point initial. Et bien sûr, lorsque l'utilisateur déplace la broche, je veux bien les coordonnées de changement dans les champs.
J'espère que je me suis fait clair. Qu'ai-je fait de mal? Dois-je utiliser le Le géocodage service?

Voici le 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>

Et le code 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>

InformationsquelleAutor Macxim | 2011-05-11

L'une de ces travaux

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();
});

Vous pouvez également envisager d'utiliser le dragend événement aussi

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

Hey, merci, en fait j'ai résolu ce problème moi-même hier, avec exactement le même code que vous avez fournis. Donc, je suis heureux, j'ai pu obtenir le même résultat. Je vais répondre à ma propre question hier, mais StackOverFlow ne serait pas me laisser. Apparemment je ne peux pas répondre à ma propre question avant 8 heures (Nouvel Utilisateur). C'est ce que j'ai dit. De toute façon, je vous remercie pour votre réponse.

InformationsquelleAutor richie

11

Regarder le code officiel de l'échantillon de référence de l'API de Google Maps:
http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html
- lien brisé ....
InformationsquelleAutor George Strakhov
4

Le code qui est en fait de travail est la suivante:
```
google.maps.event.addListener(marker, 'drag', function(event){
       document.getElementById("latbox").value = event.latLng.lat();
       document.getElementById("lngbox").value = event.latLng.lng();
});
```
Il serait mieux si la carte peut être re-centré une fois le code pin est supprimée. Je suppose que cela peut être fait avec map.setCenter() mais je ne sais pas où je dois le mettre. J'ai essayé de le mettre juste avant et juste après ce bout de code mais il ne fonctionne pas.

InformationsquelleAutor Macxim

Google Maps V3 Exemple. Voici un exemple de travail d'un utilisateur suppression d'une seule broche, en remplacement de la perte de la broche avec le nouveau code pin, code pin personnalisé des images, des épingles qui peuplent lat/long valeurs dans un CHAMP de FORMULAIRE à l'intérieur d'un DIV.

<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>

Comment puis-je afficher les deux coordonnées dans un formulaire unique? Comme (-10.00000, 10.00000)?

InformationsquelleAutor walker van dyke

2

Cochez cette violon

Dans le code suivant remplacer dragend avec le l'événement vous le souhaitez. Dans votre cas 'cliquez sur'
```
google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("defaultLatitude").value = event.latLng.lat();
    document.getElementById("defaultLongitude").value = event.latLng.lng();
});
```
- Propre jouer du violon, il était capable de reproduire exactement ce que je voulais.
InformationsquelleAutor Aman Adhikari

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

a bien fonctionné pour moi.. Merci..

InformationsquelleAutor Rolwin C

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

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

Exemple De Fonctionnement JsFiddle

InformationsquelleAutor

-1

essayez Ceci 🙂

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
develop by manoj sarnaik
 -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Manoj Sarnaik</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
      type="text/javascript"></script>
    <script type="text/javascript">

    var map = null;
    var geocoder = null;

    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(20.236046, 76.988255), 1);
        map.setUIToDefault();
        geocoder = new GClientGeocoder();
      }
    }

    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 15);
              var marker = new GMarker(point, {draggable: true});
              map.addOverlay(marker);
              GEvent.addListener(marker, "dragend", function() {
                marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
              });
              GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
              });
          GEvent.trigger(marker, "click");
            }
          }
        );
      }
    }
    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">

      <p>
        <input type="text" style="width:350px" name="address" value="Malegaon,washim" />
        <input type="submit" value="Go!" />
      </p>
      <div id="map_canvas" style="width: 600px; height: 400px"></div>
    </form>

  </body>
</html>

InformationsquelleAutor MAnoj Sarnaik

Vous devez vous connecter pour publier un commentaire.