javascript - 使用 AJAX 的 Google map InfoWindow - "Uncaught TypeError: Object # has no method ' O'"错误

Question

我正在尝试使用 InfoWindow 来显示从 AJAX 调用检索到的信息。信息窗口没有关闭，当我单击标记时就会出现此错误。

这是 Chrome 控制台中错误的屏幕截图。

这是我的代码:

var infowindow = new google.maps.InfoWindow();
function showBuildingInfo(map, building_code, marker) {
  google.maps.event.addListener(marker, 'click', function() {
    $.ajax({
      'url': '/maps/building/' + building_code,
      'dataType': 'html',
      'success': function(data) {
        infowindow.setContent(data);
        infowindow.open(map, marker);
      }
    });
  });
}


function initialize() {
  var campusCenter = new google.maps.LatLng(37.6753005, -113.0732455);
  var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(37.663559,-113.08003),
    new google.maps.LatLng(37.677042,-113.066901)
  );

  var mapOptions = {
    zoom: 16,
    center: campusCenter,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

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

  var newmap = new google.maps.GroundOverlay(
      'static/images/campus.png',
      imageBounds);
  newmap.setMap(map);

  var ADLatlng = new google.maps.LatLng(37.676189,-113.069555);

  var ADMarker = new google.maps.Marker({
      position: ADLatlng,
      map: map,
      title: "Bennion Administration Building",
  });

  showBuildingInfo(newmap, 'AD', ADMarker);
}

编辑

我认为我的问题是范围界定问题。如果我将 ajax 调用从 showBuildingInfo 中移动到 addListener 函数，就像这样，它就可以正常工作。

var infowindow = new google.maps.InfoWindow();
function initialize() {
  var campusCenter = new google.maps.LatLng(37.6753005, -113.0732455);
  var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(37.663559,-113.08003),
    new google.maps.LatLng(37.677042,-113.066901)
  );

  var mapOptions = {
    zoom: 16,
    center: campusCenter,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

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

  var newmap = new google.maps.GroundOverlay(
      'static/images/campus.png',
      imageBounds);
  newmap.setMap(map);

  var ADLatlng = new google.maps.LatLng(37.676189,-113.069555);

  var ADMarker = new google.maps.Marker({
      position: ADLatlng,
      map: map,
      title: "Bennion Administration Building",
  });

  google.maps.event.addListener(ADMarker, 'click', function() {
    $.ajax({
      'url': '/maps/building/' + 'AD',
      'dataType': 'html',
      'success': function(data) {
        infowindow.setContent(data);
        infowindow.open(map, ADMarker);
       }
    });
  });

}

我想删除对函数的 ajax 调用，这样我就不会重复太多代码。我怎样才能做到这一点？

解决方案

我认为我的错误是在我的 AJAX 中使用 newmap (它不是 Map 对象，而是 GroundOverlay 对象) >成功功能。传入 map 对象似乎解决了我的问题。

为了让事情更清楚，我将 newmap 变量重命名为 overlay。我还将 AJAX 设置函数定义移到了初始化函数中，因此我没有传递那么多变量。希望此代码片段可以帮助其他人使用 AJAX 处理 Google Maps Infowindow 内容。

function initialize() {
  var campusCenter = new google.maps.LatLng(37.6753005, -113.0732455);
  var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(37.663559,-113.08003),
    new google.maps.LatLng(37.677042,-113.066901)
  );

  var mapOptions = {
    zoom: 16,
    center: campusCenter,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

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

  var overlay = new google.maps.GroundOverlay(
      'static/images/campus.png',
      imageBounds);
  overlay.setMap(map);

  var infowindow = new google.maps.InfoWindow();

  var ADLatlng = new google.maps.LatLng(37.676189,-113.069555);

  function setMarkerHandling(marker) {
    google.maps.event.addListener(marker, 'click', function() {
      $.ajax({
        'url': '/maps/building/' + marker.urlID,
        'dataType': 'text',
        'success': function(data) {
          infowindow.setContent(data);
          infowindow.open(map, marker);
        }
      });
    });
  }

  var ADMarker = new google.maps.Marker({
      position: ADLatlng,
      map: map,
      title: "Bennion Administration Building",
      urlID: "AD"
  });

  setMarkerHandling(ADMarker);
}

Answer 1

试试这个:

function setMarkerHandling(marker){

  //marker is trapped by closure in the function being defined as a handler

  google.maps.event.addListener(marker, 'click', function() {

    $.ajax({
      'url': '/maps/building/' + marker.urlID,
      'dataType': 'html',
      'success': function(data) {
        infowindow.setContent(data);
        infowindow.open(map, marker);
       }
    });
  });

}

然后在您显示的在您编辑的版本中有效的位置:

  //add the context property you need to the marker (in this case urlID)

  var ADMarker = new google.maps.Marker({
      position: ADLatlng,
      map: map,
      title: "Bennion Administration Building",
      //you had a comma after title that shouldn've broke it by the way
      urlID: "AD"
  });

  //and now to set things up generically:
  setMarkerHandling(ADMarker);