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错误

回答

相关问题