Google Maps API，InfoWindow domready事件处理程序出错 [英] Google Maps API, error with InfoWindow domready event handler

问题描述

我正在信息信息窗口中设置一个窗体，用于众包位置数据。我已经完成了一切并运行，但我试图在信息窗口打开时将lat和lng值复制到表单元素中。

I'm setting up a form within an info info window for crowdsourcing location data. I've got everything up and running, but I'm trying to copy the lat and lng values into the form elements when the info window pops open.

我已经在地图div上使用其他事件侦听器成功，但是当我使用信息窗口的domready事件处理程序时，出现错误：Uncaught TypeError：无法读取未定义的属性'_ e3 '。这个问题似乎在domready事件监听器中。

I've been successful with other event listener on the map div, but when I use the domready event handler for the info window I get an error: "Uncaught TypeError: Cannot read property '_e3' of undefined." The issue seems to be within the domready event listener.

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

推荐答案

好的，我没有超时！

// 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放置在你的迷你表单中。我怀疑这个表格是否真的在表格放置后触发。

I have a different idea without the "domready" listener. I've seen another question where you need to wait a timeout after closing the Infowindow to prevent a click propagation. In your case, waiting some time after the InfoWindow is created allows the latLng to be placed in your mini-form. I wonder if the domready really fires after the form is placed or not.

我建议更新这个函数：

What I'm suggesting is updating this function:

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

这篇关于Google Maps API，InfoWindow domready事件处理程序出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！