"Uncaught : Object #<tg>没有方法‘O’‘“错误

Question

我试图使用InfoWindow来显示从AJAX调用中检索到的信息。infowindow没有关闭，只要我单击标记，就会给出这个错误。

以下是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调用，这样我就不会有太多的代码重复。我该怎么做？

溶液

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

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

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

Answer 2

是否传入infoWindow内容的有效数据？从医生那里：

content: This can be an HTML element, a plain-text string, or a string containing HTML.

我看到了预期的data dataType是text，但可能会再次检查它是否被正确处理。