Question

民间：

我正在尝试使用Google Maps API v3点击USGS Streamflow的标记时激活信息窗口。单击标记时，事件侦听器不会触发。标记层在ajax中创建。当我将鼠标悬停在标记上时，标题显示。

请参阅http://goplay.source3.com处的示例地图。 javascript位于http://goplay.source3.com/assets/js/outdoor_report.js

我在控制台中没有看到任何错误。事件监听器片段如下;我没有看到＆＃34; ouch＆＃34;登录控制台。如果我从streamflowLayer更改侦听器以映射infowindow随机显示在其中一个标记上。

google.maps.event.addListener(streamflowLayer, 'click', function() {
  console.log('ouch');
  infowindow.open(map,streamflowLayer);
});

使用ajax调用的函数是：

function streamflowData(){
  $.ajax({ 
    url : "http://waterservices.usgs.gov/nwis/iv/?format=json&indent=on&bBox=" + boundsURL + "&parameterCd=00060", 
    dataType : "json",
    success : function(parsed_json) { 
      for (var i = 0; i <= parsed_json.value.timeSeries.length-1; i++) {
        var siteName = parsed_json['value']['timeSeries'][i]['sourceInfo']['siteName'];
        var siteStreamflow = parsed_json['value']['timeSeries'][i]['values'][0]['value'][0]['value'];
        var siteLatitude = parsed_json['value']['timeSeries'][i]['sourceInfo']['geoLocation']['geogLocation']['latitude']
        var siteLongitude = parsed_json['value']['timeSeries'][i]['sourceInfo']['geoLocation']['geogLocation']['longitude']
        var siteTime = parsed_json['value']['timeSeries'][i]['values'][0]['value'][0]['dateTime'];
        var siteLatLong = {lat: siteLatitude, lng: siteLongitude}; 
        streamflowLayer = new google.maps.Marker({
            position: siteLatLong,
            title: siteName + '\n' + siteStreamflow + ' cfs' + '\n' + 'Date/Time: ' + siteTime,
            icon: streamIcon,
        });
        streamflowMarker.push(streamflowLayer);
        addstreamflowMarker();
      }
    }, // end sucess 
    error: function() {
      // removestreamflowMarker();
      console.log("Zoom in to see streamflows");
    } // end error
  });
}; // end streamflow

如果需要其他信息，请与我们联系。谢谢你的帮助。

Answer 1

在添加标记后添加了监听器...但是哪个标记？

您多次定义/覆盖streamflowLayer：

var streamflowLayer;
streamflowLayer = new google.maps.Marker();

streamflowLayer = new google.maps.Marker({
          position: siteLatLong,
          title: siteName + '\n' + siteStreamflow + ' cfs' + '\n' + 'Date/Time: ' + siteTime,
          icon: streamIcon,
      });

AJAX异步运行，当你添加监听器时，响应还不可用，监听器将被添加到2中创建的标记中。（什么都没有任何效果，这个标记没有任何属性......他是看不见的）

在添加侦听器时，侦听器将被添加到由变量表示的对象中，当您稍后覆盖此变量时，新对象将不会继承该事件。

您必须为将在$ .ajax-callback中创建的每个标记添加单独的侦听器。

Answer 2

好的，想通了。遵循Molle博士的建议和“在事件听众中使用闭包”＃39;位于https://developers.google.com/maps/documentation/javascript/events#EventClosures

添加了函数＆＃34; attachInfoBox（streamflowLayer，siteName，site_code）＆＃34;就在ajax调用中for循环结束之前。 attacheInfoBox（）有一个＆＃39;点击＆＃39;甚至是调用infoWindow（）的监听器。现在，我将infoWindow替换为加载到div中的时间序列图。但您可以轻松启用infoWindow。 ajax调用看起来像：

function streamflowData(){
  $.ajax({ 
    url : "http://waterservices.usgs.gov/nwis/iv/?format=json&indent=on&bBox=" + boundsURL + "&parameterCd=00060", 
    dataType : "json",
    success : function(parsed_json) { 
      for (var i = 0; i <= parsed_json.value.timeSeries.length-1; i++) {
        var siteName = parsed_json['value']['timeSeries'][i]['sourceInfo']['siteName'];
        var site_code = parsed_json['value']['timeSeries'][i]['sourceInfo']['siteCode'][0]['value'];
        var siteStreamflow = parsed_json['value']['timeSeries'][i]['values'][0]['value'][0]['value'];
        var siteLatitude = parsed_json['value']['timeSeries'][i]['sourceInfo']['geoLocation']['geogLocation']['latitude']
        var siteLongitude = parsed_json['value']['timeSeries'][i]['sourceInfo']['geoLocation']['geogLocation']['longitude']
        var siteTime = parsed_json['value']['timeSeries'][i]['values'][0]['value'][0]['dateTime'];
        var siteLatLong = {lat: siteLatitude, lng: siteLongitude}; 
        var streamflowLayer = new google.maps.Marker({
            position: siteLatLong,
            title: siteName + '\n' + siteStreamflow + ' cfs' + '\n' + 'Date/Time: ' + siteTime,
            icon: streamIcon,
        });
        streamflowMarker.push(streamflowLayer);
        addstreamflowMarker();
        attachInfoBox(streamflowLayer, siteName, site_code);             
      };  // end for
    }, // end sucess 
    error: function() {
      // removestreamflowMarker();
      console.log("Zoom in to see streamflows");
    } // end error
  });
}; // end streamflow

attachInfoBox（）函数如下所示：

// attach an infoWindow
function attachInfoBox(marker, siteName, site_code) {
  var infowindow = new google.maps.InfoWindow(
      { content: siteName,
        size: new google.maps.Size(50,50)
      });
  google.maps.event.addListener(marker, 'click', function() {
    // infowindow.open(map,marker);
    getStreamTimeSeries(site_code);      
  });
}

getStreamTimeSeries（）使用Flot来描绘流量随时间变化的情况。

在ajax中创建google标记时，单击事件不会触发

2 个答案: