Question

我是google-maps和javascript的新手，我已经完成了这些examples。但我仍然不知道如何将它应用到我的代码中，它不起作用。希望如何有人可以帮助我。谢谢。

  // this variable will collect the html which will eventually be placed in the side_bar
  var side_bar_html = "";

  // arrays to hold copies of the markers and html used by the side_bar
  // because the function closure trick doesnt work there
  var gmarkers = [];


  // A function to create the marker and set up the event window
  function createMarker(point,name,html) {
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(html);
    });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
     return marker;
  }


  // This function picks up the click and opens the corresponding info window
  function myclick(i) {
    GEvent.trigger(gmarkers[i], "click");
  }


  // create the map
  var map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng( 43.907787,-79.359741), 8);

  // add the points    
  var point = new GLatLng(43.65654,-79.90138);
  var marker = createMarker(point,"This place","Some stuff to display in the<br>First Info Window")
  map.addOverlay(marker);

  var point = new GLatLng(43.91892,-78.89231);
  var marker = createMarker(point,"That place","Some stuff to display in the<br>Second Info Window")
  map.addOverlay(marker);

  var point = new GLatLng(43.82589,-78.89231);
  var marker = createMarker(point,"The other place","Some stuff to display in the<br>Third Info Window")
  map.addOverlay(marker);


  // put the assembled side_bar_html contents into the side_bar div
  document.getElementById("side_bar").innerHTML = side_bar_html;

}

侧边栏位于google-maps旁边。希望有人可以查看我的代码。

Answer 1

你在那里获得的文件非常好。

让我知道更多地简化它。因此，为了让聚类器进入，您将需要以下各个部分。

您的项目必须导入markerclusterer.js文件。
您需要array个标记。
您需要实例化MarkerClusterer对象。

就是这样，直截了当。

1：标记实例化

我可以从您已经完成的代码中看到。

var marker = new google.maps.Marker(
    {
        position: myLatLng,
        map: map,
        title: '1111'
    });

2：构建标记数组

这里没什么。基本上你宣布一个[]对象并将标记推入其中。

var markers = [ marker, marker2, marker3 ];

3：实例化MarkerClusterer对象

我想唯一具有挑战性的部分就是这个。如前所述，您将导入新的markerclusterer.js文件。

构建一个对象以保存MarkerClusterer对象所需的任何配置并实例化它。

markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',
        gridSize: 10,
        minimumClusterSize: 2
    });

这是一个例子;

Clusterer

如何将标记群集添加到googlemaps中

1 个答案: