Javascript 标记、信息窗口并自动缩放以适应所有标记

我一直在尝试创建一个谷歌地图，它有可点击的标记，缩放级别根据地图上标记的数量进行调整，我有下面的代码，我知道这些代码不太正确，但不知道为什么，任何关于我哪里出错的指针都将非常感谢

<script type="text/javascript">
function initialize() {

  // My options
  var myOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }

  // Create map on #map_canva
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  // Define boundarys
  var markerBounds = new google.maps.LatLngBounds();

  // Create array
  var countries = [
      {title:'Theatre by the Lake', lat:54.32223562211788, lon:-2.742498400000045, content:"<h2>Theatre by the Lake</h2>"},
      {title:'Pirelli International Rally',  content:"<h2>Pirelli International Rally</h2>"},
      {title:'Lowther Castle',  content:"<h2>Lowther Castle</h2>"},
      {title:'South Lakes Wild Animal Park',  content:"<h2>South Lakes Wild Animal Park</h2>"},
      {title:'Cumbria Karting',  content:"<h2>Cumbria Karting</h2>"},
  ];

  // Create markers
  for (var i = 0; i < countries.length; i++) { 
      var c = countries[i]; 
      c.marker = new google.maps.Marker({
          position: new google.maps.LatLng(c.lat, c.lon), 
          map: map,
          icon: '/display_images/icon_stockist.png',
          title: c.title});
      c.infowindow = new google.maps.InfoWindow({content: c.content}); 
      google.maps.event.addListener(c.marker, 'click', makeCallback(c)); 
      // Create marker bounds
      markerBounds.extend(countries);
  } 

  // Create info windows based on above content
  function makeCallback(country) { 
      return function () { 
          country.infowindow.open(map, country.marker); 
      }; 
  }
}

// Fit map to marker boundaries
map.fitBounds(markerBounds);
</script>

函数初始化（）{
//我的选择
变量myOptions={
mapTypeId:google.maps.mapTypeId.ROADMAP，
}
//在#map_canva上创建地图
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
//定义边界
var markerBounds=new google.maps.LatLngBounds（）；
//创建数组
var国家=[
{标题：'湖边剧院'，lat:54.322256211788，lon:-2.742498400000045，内容：“湖边剧院”}，
{标题：“倍耐力国际拉力赛”，内容：“倍耐力国际拉力赛”}，
{标题：'Lowther Castle'，内容：“Lowther Castle”}，
{标题：'南湖野生动物公园'，内容：“南湖野生动物公园”}，
{标题：“坎布里亚卡丁车”，内容：“坎布里亚卡丁车”}，
];
//创建标记
对于（var i=0；i

您的问题是，您在initialize函数中将map创建为局部变量，然后在调用

map.fitBounds

时尝试使用该函数访问它，而该函数没有访问它的权限

使用

initialize

向外声明映射，或者在initialize函数中移动map.fitBounds（）

也可以在调用

markerBounds.extend（国家）时使用，您正在将其传递给整个国家/地区数组，而您真正需要的是将其传递给单个LatLng对象。请尝试以下方法：

for (var i = 0; i < countries.length; i++) { 
      var c = countries[i]; 
      var latlng = new google.maps.LatLng(c.lat, c.lon);
      c.marker = new google.maps.Marker({
          position: latlng, 
          map: map,
          icon: '/display_images/icon_stockist.png',
          title: c.title});
      c.infowindow = new google.maps.InfoWindow({content: c.content}); 
      google.maps.event.addListener(c.marker, 'click', makeCallback(c)); 
      // Create marker bounds
      markerBounds.extend(latlng);
  } 

for（var i=0；i
没有必要在标题中添加标签，有一个标签系统可以实现这一点。有关更多信息和讨论，请参阅，您可能希望在循环运行之后调用map.fitBounds（bounds）（而不是在初始化函数之外，在使用所有标记的位置扩展边界之前）。谢谢大家，现在就开始吧！