调试我的谷歌地图集群代码答案

【问题标题】：Debug my Google map Cluster Code调试我的谷歌地图集群代码
【发布时间】：2015-01-16 08:19:40
【问题描述】：

我正在使用此代码创建一个谷歌地图，其中 3 个点隐藏在一个标记中，当单击一个标记时，这些点要么合并到一个标记中，要么打开为 3 个单独的点，但是地图没有出现任何人都可以检查我的代码并查看潜在问题吗？

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>favorite cities</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
      (function() {
        window.onload = function(){
          var options = {
            zoom: 3,
            center: new google.maps.LatLng(37.99, -93.77),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById('map'), options);
          
          var mgr = new MarkerManager(map);
          var A = new google.maps.Marker({
            position: new google.maps.LatLng(37.99, -93.77),
            icon: 'img/cluster.png'
          });
          google.maps.event.addListener(A, 'click', function() {
            map.setZoom(7);
            map.setCenter(Kloof.getPosition());
          });
          
          var Cities = [A];
          var Schools = [
            //SChool1
       new google.maps.Marker({position: new google.maps.LatLng(38.99, -93.97)}),
                                    //School2
       new google.maps.Marker({position: new google.maps.LatLng(37.89, -94.77)}),
                                    //School3
       new google.maps.Marker({position: new google.maps.LatLng(37.79, -95.77)})
                                    ];
                                    google.maps.event.addListener(mgr, 'loaded', function() {
                                    agr.addMarkers(Cities, 11, 6);
                                    agr.addMarkers(Schools, 6);
                                    agr.refresh
                                   });
                                   };
                                   })();
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

【问题讨论】：

position: new google.maps.LatLng() 后缺少参数和逗号。 Area 是无效的数组。修复语法错误和参数问题并回复我们。
请提供Minimal, Complete, Tested and Readable example。如果您的“真实”数据受到“限制”，请提供允许重现问题的测试数据。
@PHPglue 仍然没有地图出现
@geocodezip 感谢您提供的提示，它现在使用示例数据进行更新
我在你的代码 sn-p 上得到 Uncaught SyntaxError: Unexpected identifier（就像 PHPglue...），修复它（如建议的那样）在这一行 Uncaught SyntaxError: Unexpected token ; 上提供更多语法错误 var Cities = [A;

标签： javascript google-maps google-maps-api-3 google-maps-markers markerclusterer

【解决方案1】：

变化：

var map = new google.maps.Map(document.getElementById('map'), options);

收件人：

var map = new google.maps.Map(document.getElementById('map-canvas'), options);

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>favorite cities</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
      (function() {
        window.onload = function(){
          var options = {
            zoom: 3,
            center: new google.maps.LatLng(37.99, -93.77),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById('map-canvas'), options);
          
          var mgr = new MarkerManager(map);
          var A = new google.maps.Marker({
            position: new google.maps.LatLng(37.99, -93.77),
            icon: 'img/cluster.png'
          });
          google.maps.event.addListener(A, 'click', function() {
            map.setZoom(7);
            map.setCenter(Kloof.getPosition());
          });
          
          var Cities = [A];
          var Schools = [
            //SChool1
       new google.maps.Marker({position: new google.maps.LatLng(38.99, -93.97)}),
                                    //School2
       new google.maps.Marker({position: new google.maps.LatLng(37.89, -94.77)}),
                                    //School3
       new google.maps.Marker({position: new google.maps.LatLng(37.79, -95.77)})
                                    ];
                                    google.maps.event.addListener(mgr, 'loaded', function() {
                                    agr.addMarkers(Cities, 11, 6);
                                    agr.addMarkers(Schools, 6);
                                    agr.refresh
                                   });
                                   };
                                   })();
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

【讨论】：

地图现在正在加载，谢谢，但是我的积分没有出现，至少没有出现在我的屏幕上......你知道可能出了什么问题吗？
来自我之前的评论 - 然后是 Uncaught ReferenceError: MarkerManager is not defined（但地图）

【解决方案2】：

我把代码改成如下：

<
    var schoolArray = []; //Global array to store the POINTS
    var SchoolPoints = [[-29.788911, 30.852721, 'Thomas More College'], //I am creating a global array to store the MARKERS
                [-29.781297, 30.838465, 'Kloof Senior Primary School'],
                [-29.827008, 30.881706, 'Pinetown Boys HighSchool']];  

    function initialize() { //I am initializing the google map and how it will appear on my dashboard
    var myOptions = {
        zoom: 9,
        center: new google.maps.LatLng(-29.807762, 30.854261),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var mcOptions = { //this is where i determine BY GRID the amount of tiles that will determine if my schools points cluster or if they are separate and also the max zoom level the individual points are visual at 
        gridSize: 25,
        maxZoom: 20
    };
  var mc = new MarkerClusterer(map, [], mcOptions); //this creates the blue cluster you see initially on the map

  google.maps.event.addListener(map, 'click', function() { //upon click the map zooms in and displays the 3 schools with separate markers
        infowindow.close();
    });

    // This is where the markers are added to the map and sorted into the cluster
  for(var i=0; i<SchoolPoints.length; i++){ //This is where where i am setting up my markers on the map based off the number of elements within the points array
         createMarker(new google.maps.LatLng(SchoolPoints[i][0], SchoolPoints[i][1]), SchoolPoints[i][2]);
    }
    
  mc.addMarkers(schoolArray , true); //now the markers are clustered together in the blue symbol
}

  var infowindow = new google.maps.InfoWindow({ //I am determining the size of the info window that will be displayed by my school points
    size: new google.maps.Size(500, 250)
});

  function createMarker(latlng, html) { //this function is where i create the individual markers
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: '',       
    });

  marker.setAnimation(google.maps.Animation.DROP); //I decided for aesthetic reasons i would like to see if i could animate the markers and so i added a drop animation
    
  google.maps.event.addListener(marker, 'click', function() { //when clicking the markers their info windows are displayed
    infowindow.setContent(contentString); //This sets the info window to have the content listed in the array visible
        infowindow.open(map, marker);
    });
    
    schoolArray.push(marker); 
}

window.onload = initialize;

【讨论】：