0

インフォウィンドウを使用して、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はなくオブジェクト）を使用していたことだと思います。オブジェクトを渡すことで問題が解決したようです。MapGroundOverlaysuccessmap

わかりやすくするために、newmap変数の名前をに変更しましたoverlay。また、AJAXセットアップ関数の定義を初期化関数に移動したため、多くの変数を渡さなかった。このコードスニペットが、AJAX for GoogleMapsInfowindowコンテンツを使用している他の人に役立つことを願っている。

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 に答える