谷歌地圖API獲取經緯度和替換標記？

Question

因此，當用戶輸入地址時，它添加了很好的標記，用戶還可以將標記移動到新的位置並檢索它的lat和lng。但是它沒有做到的是：

1. 獲取緯度和經度從地址（當引腳被添加到頁面）
2. 如果地址的變化，它增加了一個新的標誌，而不是替換現有的一個。

下面的代碼：

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

Answer 1

可以聲明一個全局變量，並設置標誌的地圖是null

var map; 
var marker; 

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); 
     if(marker && marker instanceof google.maps.Marker){ 
     marker.setMap(null); 
     marker = 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? 
    }); 
     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); 
    } 
    }); 
} 

Answer 2

如果你只需要在地圖上以上的一個標記時間你可以做以下事情：

• 設置標記變量爲全球

  var marker;

• 變化的函數的開頭：

  function geocodeAddress(geocoder, resultsMap) { if(marker != null){ marker.setMap(null); document.getElementById('prevlatlng').innerHTML = "LAST MARKER || lng: " + marker.getPosition().lng() +" lat: " + marker.getPosition().lat(); }

這意味着如果一個標記是當前那麼它會刪除它。

編輯：這也將與上次成功標記添加到地圖

然後添加像往常一樣更新股利。

的jsfiddle：http://jsfiddle.net/4mtyu/2687/

Answer 3

用於獲取緯度和經度從地址（當引腳被添加到網頁），你可以

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

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

變革的標誌，而不是創建一個新的，你可以定義globale（窗位），VAR標記，並分配前夕，這對VAR創建標記的結果記住Tor來隱藏舊標記

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