Google maps V3 InfoWindow錯誤

我在簡單的網頁上使用簡單的Google Maps API。該地圖包含一些自定義圖標，並設置了一個infoWindow。當通過點擊圖標打開infoWindow/bubble時，地圖不會自動滾動，並且單擊信息氣泡上的X不會關閉它。Google maps V3 InfoWindow錯誤

我使用JQuery，但沒有它做了測試，它仍然無法正常工作。單擊一個圖標，並在看螢火蟲控制檯I看到下面的錯誤消息後：

BO是不是一個函數

（75超出範圍42）

我已經設置了一個jsFiddle這個測試用例，但我也在這裏包含代碼（因爲代碼是控件的一部分，JavaScript在本體中）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     function GetMapBubbleContent(id) { 
      return 'content'; 
     } 

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

     function InitializeMap() { 
      var imagesPath = 'http://lh6.ggpht.com/eib8rqN0V8k1Jhnu56cqubkvaEPf_6BXgyEqBPUCj9mHo57xXpMZAMUqr6SPj5b3cUQrqnoNc4Ct3Ps0zRg=s36'; 
      var image = new google.maps.MarkerImage(imagesPath, new google.maps.Size(36, 36), new google.maps.Point(0, 0), new google.maps.Point(0, 36)); 
      var shadow = new google.maps.MarkerImage(imagesPath, new google.maps.Size(55, 45), new google.maps.Point(0, 0), new google.maps.Point(0, 45)); 
      var shape = { 
       coord: [0, 0, 36, 0, 36, 36, 0, 36], 
       type: 'poly' 
      }; 
      var image_own = new google.maps.MarkerImage(imagesPath, new google.maps.Size(36, 36), new google.maps.Point(0, 0), new google.maps.Point(0, 36)); 

      var image_small = new google.maps.MarkerImage(imagesPath, new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(0, 20)); 
      var shadow_small = new google.maps.MarkerImage(imagesPath, new google.maps.Size(30, 25), new google.maps.Point(0, 0), new google.maps.Point(0, 25)); 
      var shape_small = { 
       coord: [0, 0, 20, 0, 20, 20, 0, 20], 
       type: 'poly' 
      }; 
      var image_small_own = new google.maps.MarkerImage(imagesPath, new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(0, 20)); 
      var latlng = new google.maps.LatLng(46.239343, 5.399111); 

      var myOptions = { 
       zoom: 6, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.HYBRID, 
       pancontrol: false, 
       zoomcontrol: true, 
       scalecontrol: true 
      }; 

      infowindow = new google.maps.InfoWindow(); 
      map_plants = new google.maps.Map(document.getElementById("panelMap"), myOptions); 

      var mrk0 = new google.maps.Marker({ 
       position: new google.maps.LatLng(48.183909, 10.977222), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test1', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk0, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(1218)); 
       infowindow.open(1218, mrk0); 
      }); 
      var mrk1 = new google.maps.Marker({ 
       position: new google.maps.LatLng(45.574806, 11.834682), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test2', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk1, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(1131)); 
       infowindow.open(1131, mrk1); 
      }); 
      var mrk2 = new google.maps.Marker({ 
       position: new google.maps.LatLng(48.976219, 16.977306), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test3', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk2, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(911)); 
       infowindow.open(911, mrk2); 
      }); 
      var mrk3 = new google.maps.Marker({ 
       position: new google.maps.LatLng(1.000000, 15.000000), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test4', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk3, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(1422)); 
       infowindow.open(1422, mrk3); 
      }); 
      var mrk4 = new google.maps.Marker({ 
       position: new google.maps.LatLng(48.055114, 9.052830), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test5', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk4, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(687)); 
       infowindow.open(687, mrk4); 
      }); 
     } 

     $(document).ready(function() { 
      InitializeMap(); 
     }); 
    </script> 
    <div id="panelMap" style="height: 600px; width: 600px; overflow: hidden;"> 
</body> 
</html>

來源

2011-06-13 Germstorm

它出現在你的事件監聽器是不正確的..

google.maps.event.addListener(mrk1, 'click', function() { 
    infowindow.close(); 
    infowindow.setContent(GetMapBubbleContent(1131)); 
    infowindow.open(1131, mrk1); 
});

信息窗口開行應該是：

infowindow.open(map_plants, mrk1);

打開需要爲PARAM地圖，然後馬克所以這個工作對你我的小提琴。

Working fiddle update here.

編輯：另外，對於給予好評，我們看到你已經做的工作經過深思熟慮的，詳細的例子。

來源

2011-06-13 15:19:39 Khepri

非常感謝Khepri。這確實是問題。標記代碼是自動生成的，佔位符錯位。 – Germstorm 2011-06-13 15:38:21

Google maps V3 InfoWindow錯誤

回答

相關問題