谷歌地圖api V3更新標記

Question

我有一張加載的地圖。 我想添加一個標記，從文本框中獲取緯度和長度，我無法理解它。

當我點擊updatemap按鈕時沒有任何反應。

這裏是我到目前爲止的代碼：

$(document).ready(function() { 
    alert("Dom, dom dom dom dom"); 


var map; 
var marker; 

function initialize() { 
    var myLatlng = new google.maps.LatLng(40.65, -74); 
    var myOptions = { 
     zoom: 2, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    } 

    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 
} 



$("#updateMap").click(function(){ 


    var newLatLng = new google.maps.LatLng(lat, lng); 
    marker.setPosition(newLatLng); 

    var lat = parseFloat(document.getElementById('markerLat').value); 
    var lng = parseFloat(document.getElementById('markerLng').value); 
    var newLatLng = new google.maps.LatLng(lat, lng); 


    marker = new google.maps.Marker({ 
     position: newLatLng, 
     map: map, 
     draggable: true 
    }); 


}); 


}); 



// Onload handler to fire off the app. 
google.maps.event.addDomListener(window, 'load', initialize); 

}); 

Answer 1

更新

而且，由於你與當地var同名遮蓋了全局map引用從未設置爲實際地圖實例。

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

這應該只是

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

---

您使用lat和lng的標記位置他們正在初始化之前（除非他們設置全局某處）：

var newLatLng = new google.maps.LatLng(lat, lng); 
marker.setPosition(newLatLng); 

如果你想更新相同標記的位置而不是創建一個新標記，烏爾德簡單地這樣做：

$("#updateMap").click(function(){ 
    var lat = parseFloat(document.getElementById('markerLat').value); 
    var lng = parseFloat(document.getElementById('markerLng').value); 
    var newLatLng = new google.maps.LatLng(lat, lng); 
    marker.setPosition(newLatLng); 
}); 

Answer 2

首先，在initialize功能要創建新的本地map變量，因爲你用var關鍵字。此變量在initialize之外不可見，所以您需要刪除var以使用全局變量。

其次，在定義變量前，您正在使用lat和lng變量。

三，您正在訪問方法變量時可能未定義。

固定所有這些後，你的代碼可能是這樣的：

$(document).ready(function() { 
    alert("Dom, dom dom dom dom"); 

    var map; 
    var marker; 

    function initialize() { 
     var myLatlng = new google.maps.LatLng(40.65, -74); 
     var myOptions = { 
      zoom: 2, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
     } 

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

    $("#updateMap").click(function(){ 

    var lat = parseFloat(document.getElementById('markerLat').value); 
    var lng = parseFloat(document.getElementById('markerLng').value); 
    var newLatLng = new google.maps.LatLng(lat, lng); 

    if (marker != undefined) 
     marker.setPosition(newLatLng); 
    else 
     marker = new google.maps.Marker({ 
      position: newLatLng, 
      map: map, 
      draggable: true 
     }); 
    }); 
    // Onload handler to fire off the app. 
    google.maps.event.addDomListener(window, 'load', initialize); 
});