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