Question

我正在使用此代码创建一个Google地图，其中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>

Answer 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>

Answer 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;

调试我的Google地图群集代码

2 个答案: