0

我正在尝试使用 InfoWindow 显示从 AJAX 调用中检索到的信息。信息窗口没有关闭，并在我单击标记后立即给我这个错误。

这是 Chrome 控制台中错误的屏幕截图。 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对象，而是对象）。传递对象似乎解决了我的问题。GroundOverlaysuccessmap

为了让事情更清楚，我将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);
}
4

2 回答 2

2

尝试这个：

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);
于 2013-03-08T00:11:54.650 回答
0

您是否为 infoWindow 内容传递了有效数据？从文档：

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

我看到预期的datadataType 是text，但可能会仔细检查它是否被正确处理。

于 2013-02-27T23:29:17.937 回答