Google Maps API，與InfoWindow domready事件處理程序錯誤

Question

我在信息信息窗口中爲衆包位置數據設置了一個窗體。我已經啓動了一切，但我試圖在信息窗口打開時將lat和lng值複製到表單元素中。

我已經成功的在地圖上的div其他事件偵聽器，但是當我使用domready中事件處理信息的窗口，我得到一個錯誤：「遺漏的類型錯誤：無法讀取屬性‘_ E3’未定義「。這個問題似乎在domready事件監聽器中。

// Global Variables 
var map, markerWindow, newMarker; 

function updateMarkerPosition(latLng) { 
    alert(latLng); 
    var lat = latLng.lat().toString(); 
    var lng = latLng.lng().toString(); 
    google.maps.event.addListener(markerWindow, "domready", function() { 
     alert(latLng); // debug alert 
     document.getElementById('lat').value = lat.slice(0,6); 
     document.getElementById('lng').value = lng.slice(0,7); 
    }); 
} 
function placeMarker() { 
// Setup html form markup for marker pop-up infowindow 
    var html = '<div id="htmlform">' + 
     '<form action="process.php" method="post" ' + 
     'id="mapForm"> <fieldset> <label for="contact">' + 
     'Email:</label><input type="text" name="contact"/>' + 
     '<br/> <label for="date">Date:</label><input ' + 
     'type="text" name="date"/><br/> <label for="desc">' + 
     'Description of Sighting:</label><input type="text" ' + 
     'name="desc"/><br/> <label for="lat">Latitude:</label>' + 
     '<input type="text" name="lat" id="lat" class="location"/><br/>' + 
     '<label for="lng">Longitude:</label><input type="text"' + 
     'name="lng" id="lng" class="location"/><br/><input type="submit"' + 
     'value="Post Sighting!" onclick="saveData()"/> </fieldset></form>' + 
     '</div>'; 
    var newMarker = new google.maps.Marker({ 
     draggable: true, 
     map: map, 
     animation: google.maps.Animation.DROP, 
     title: "I'm draggable!", 
    }); 
    var markerWindow = new google.maps.InfoWindow({ 
     content: html, 
    }); 
    google.maps.event.addListener(map, "click", function(e) { 
     newMarker.setPosition(e.latLng); 
     markerWindow.open(map, newMarker); 
     map.setCenter(e.latLng); 
     updateMarkerPosition(newMarker.getPosition()); 
    });    
    google.maps.event.addListener(newMarker, 'dragstart', function() { 
     markerWindow.close(); 
    }); 
    google.maps.event.addListener(newMarker, 'dragend', function(e) { 
     newMarker.setPosition(e.latLng); 
     markerWindow.open(map, newMarker); 
     updateMarkerPosition(newMarker.getPosition()); 
    }); 
} 
// Run when DOM window loads 
function initialize() { 
    map = new google.maps.Map(document.getElementById('map_canvas'),{ 
     zoom: 8, 
     center: new google.maps.LatLng(38.487, -75.641), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    placeMarker(); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

好吧，我沒有超時！

// Global Variables 
var map, markerWindow, newMarker; 

function placeMarker() { 
// Setup html form markup for marker pop-up infowindow 
    var html = '<div id="htmlform">' + 
     '<form action="process.php" method="post" ' + 
     'id="mapForm"> <fieldset> <label for="contact">' + 
     'Email:</label><input type="text" name="contact"/>' + 
     '<br/> <label for="date">Date:</label><input ' + 
     'type="text" name="date"/><br/> <label for="desc">' + 
     'Description of Sighting:</label><input type="text" ' + 
     'name="desc"/><br/> <label for="lat">Latitude:</label>' + 
     '<input type="text" name="lat" id="lat" class="location"/><br/>' + 
     '<label for="lng">Longitude:</label><input type="text"' + 
     'name="lng" id="lng" class="location"/><br/><input type="submit"' + 
     'value="Post Sighting!" onclick="saveData()"/> </fieldset></form>' + 
     '</div>'; 
    var newMarker = new google.maps.Marker({ 
     draggable: true, 
     map: map, 
     animation: google.maps.Animation.DROP, 
     title: "I'm draggable!", 
    }); 
    var markerWindow = new google.maps.InfoWindow({ 
     content: html, 
    }); 
    google.maps.event.addListener(map, "click", function(e) { 
     newMarker.setPosition(e.latLng); 
     markerWindow.open(map, newMarker); 
     map.setCenter(e.latLng); 
    });    
    google.maps.event.addListener(newMarker, 'dragstart', function() { 
     markerWindow.close(); 
    }); 
    google.maps.event.addListener(newMarker, 'dragend', function(e) { 
     newMarker.setPosition(e.latLng); 
     markerWindow.open(map, newMarker); 
    }); 
    google.maps.event.addListener(markerWindow, 'domready', function() { 
     latLng = newMarker.getPosition(); 
     var lat = latLng.lat().toString(); 
     var lng = latLng.lng().toString(); 
     document.getElementById('lat').value = lat.slice(0,6); 
     document.getElementById('lng').value = lng.slice(0,7); 
    }); 
} 
// Run when DOM window loads 
function initialize() { 
    map = new google.maps.Map(document.getElementById('map_canvas'),{ 
     zoom: 8, 
     center: new google.maps.LatLng(38.487, -75.641), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    placeMarker(); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

我有一個不同的想法，沒有「domready」監聽器。我看到了另一個問題，您需要在關閉Infowindow後等待超時以防止點擊傳播。在你的情況下，在創建InfoWindow之後等待一段時間，可以將latLng放置在你的迷你表單中。我想知道在表格放置之後是否真的會觸發。

什麼，我的建議是更新此功能：

function updateMarkerPosition(latLng) { 
    var lat = latLng.lat().toString(); 
    var lng = latLng.lng().toString(); 

    setTimeout(function() { 
     document.getElementById('lat').value = lat.slice(0,6); 
     document.getElementById('lng').value = lng.slice(0,7); 
    }, 200); 
}