谷歌地图API获取经纬度和替换标记？ [英] google maps api get lat and lng and replace marker?

问题描述

因此，当用户输入地址时，它添加了很好的标记，用户也可以将标记移动到新的位置并检索它的lat和lng。然而，它没有做的是：

1. 从地址获取lat和lng（当pin被添加到页面时）


2. 如果地址改变，它会添加一个新的标记，而不是替换现有的标记。

以下是代码： p>

  var map; 
函数initMap（）{
 map = new google.maps.Map（document.getElementById（'map'），{
 zoom：8，
 center：{lat： - 34.397，lng：150.644} 
}）; 
 var geocoder = new google.maps.Geocoder（）; 
 document.getElementById（'postcode'）。addEventListener（'keyup'，function（）{
 geocodeAddress（geocoder，map）; 
}）; 
} 
函数geocodeAddress（geocoder，resultsMap）{
 var address = document.getElementById（'address1'）。value +'\xa0'+ document.getElementById（'address2'）。值+'，'+ document.getElementById（'postcode'）。value; 
 console.log（地址）; 
 geocoder.geocode（{'address'：address}，function（results，status）{
 if（status ==='OK'）{
 //如果标记存在，替换它
 map.setCenter（results [0] .geometry.location）; 
 var marker = new google.maps.Marker（{
 map：map，
 position：results [0] .geometry.location，
 title：address，
 draggable：true，
 //获取lng和lat并将其保存为2个独立变量？
} ）; 
 google.maps.event.addListener（marker，'dragend'，function（marker）{
 var latLng = marker.latLng; 
 currentLatitude = latLng.lat（）; 
 currentLongitude = latLng.lng（）; 
 console.log（currentLatitude）; 
 console.log（currentLongitude）; 
 $（＃latitude）.val（currentLatitude）; 
 $（＃longitude）.val（currentLongitude）; 
}）; 
 } else {
 $（'＃error'）。append（'< div class =alert alert-danger>地址找不到请重试< / div>'）; 
 $（。alert-danger）。fadeOut（5000）; 
} 
}）; 
 
  

解决方案

地址（当引脚添加到页面中）时，您可以

  lat = results [0] .geometry.location.lat（） ; 
 
 lng = results [0] .geometry.location.lng（）; 
  

用于更改标记而不是创建新标记，您可以定义globale（窗口级别）var标记并将前夕分配给此var创建标记的结果请记住setMap（null）用于隐藏旧标记

  var marker; 
 var map; 
 
 if（marker！= null）{
 marker.setMap（null）; 
} 
 
 marker = new google.maps.Marker（{
 map：map，
 position：results [0] .geometry.location，
 title：address，
 draggable：true，
 //获取lng和lat并将其保存为2个独立变量？
}）; 
  

So at the moment when user enter address it adds the marker which is fine, user can also move the marker to a new location and retrieve it's lat and lng. However what it doesn't do is:

1. Get lat and lng from the address (when pin is added to page)
2. If address changes it adds a new marker instead of replacing existing one.

Here's the code:

var map;
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: -34.397, lng: 150.644}
    });
    var geocoder = new google.maps.Geocoder();
    document.getElementById('postcode').addEventListener('keyup', function() {
        geocodeAddress(geocoder, map);
    });
}
function geocodeAddress(geocoder, resultsMap) {
    var address = document.getElementById('address1').value + '\xa0' + document.getElementById('address2').value +','+ document.getElementById('postcode').value;
    console.log(address);
    geocoder.geocode({'address': address}, function(results, status) {
        if (status === 'OK') {
            //if marker exist, replace it if not create it.
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: address,
                draggable:true,
                //get lng and lat and save it to 2 seperate variables?
            });
        google.maps.event.addListener(marker, 'dragend', function(marker){
        var latLng = marker.latLng; 
        currentLatitude = latLng.lat();
        currentLongitude = latLng.lng();
        console.log(currentLatitude);
        console.log(currentLongitude);
        $("#latitude").val(currentLatitude);
        $("#longitude").val(currentLongitude);
                });
          } else {
            $('#error').append('<div class="alert alert-danger">Address not found please try again</div>');
            $(".alert-danger").fadeOut(5000);  
          }
        });
      }

解决方案

for Get lat and lng from the address (when pin is added to page) you can

   lat = results[0].geometry.location.lat();

   lng = results[0].geometry.location.lng();

for change the marker instead of create a new one you can define a globale (window level ) var marker and assign eve to this var the result for marker creation remember tor setMap(null) for hide the old marker

var marker;
var map;

    if (marker != null) {
       marker.setMap(null);
    }

    marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
            title: address,
            draggable:true,
            //get lng and lat and save it to 2 seperate variables?
        });

这篇关于谷歌地图API获取经纬度和替换标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！