it-swarm.com.ru

Получить широту и долготу перетаскиваемой булавки с помощью Google Maps API V3

Я объясню. Мне удалось иметь перетаскиваемую булавку на карте. Я хочу получить координаты этой точки и поместить их в два поля: Широта и Долгота. Эти координаты будут позже отправлены в таблицу SQL через PHP . Вот пример того, что я собираюсь сделать, но вместо нескольких выводов, это просто один, и он перетаскивается. Проблема в том, что я даже не могу отобразить координаты начальной точки. И, конечно же, когда пользователь перемещает булавку, я хочу, чтобы координаты также менялись в полях .. Надеюсь, я прояснил ситуацию. Что я сделал не так? Должен ли я использовать Геокодирование сервис?

Здесь идет 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> 

И 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

Любая из этих работ

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

Вы также можете рассмотреть возможность использования события драгенд

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

Посмотрите на официальный пример кода из ссылки API Карт Google: http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html

11
George Strakhov

Код, который действительно работает, выглядит следующим образом:

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

Было бы лучше, если бы карта была перецентрирована после того, как булавка будет сброшена. Я думаю, это можно сделать с помощью map.setCenter(), но я не уверен, куда мне его поместить. Я попытался поместить это прямо до и сразу после этого куска кода, но это не будет работать.

4
Macxim

Пример Google Maps V3. Вот рабочий пример того, как пользователь отбрасывает один вывод, заменяя удаленный вывод новым выводом, пользовательскими изображениями выводов, выводами, которые заполняют значения широты/долготы в ПОЛЕ ФОРМЫ в 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> 
4
walker van dyke

Проверьте это скрипка

В следующем коде замените драгенд на событие вы хотите. В вашем случае '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();
}); 

работал хорошо для меня .. Спасибо ..

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

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

Пример выполнения JsFiddle

0
user1817927