添加简单的标记clusterer谷歌地图 [英] Adding simple marker clusterer to google map

问题描述

我在向地图添加标记群集功能时遇到问题。我想要的是为我的标记使用自定义图标，并且每个标记都有自己的信息窗口，我希望能够进行编辑。

我确实做到了，但现在添加标记群集库功能时遇到问题。我读了一些关于向数组添加标记的内容，但我不确定它到底意味着什么。此外，所有与数组相关的例子都发现，没有信息窗口，也没有找到合适的方法来添加它们。

这里是我的代码（大部分来自Geocodezip.com）：

 < script type =text / javascriptsrc =http： //maps.google.com/maps/api/js?sensor=false\"></script> 
< script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js><<< ; /脚本> 
< style type =text / css> 
 html，body {height：100％; } 
< / style> 
< script type =text / javascript> 
 //<！[CDATA [
 var map = null; 
函数initialize（）{
 var myOptions = {
 zoom：8，
 center：new google.maps.LatLng（43.907787，-79.359741），
 mapTypeControl： true，
 mapTypeControlOptions：{style：google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
 navigationControl：true，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
} 
 map = new google.maps.Map（document.getElementById（map_canvas），
 myOptions）; 
 
 var mcOptions = {gridSize：50，maxZoom：15}; 
 var mc = new MarkerClusterer（map，[]，mcOptions）; 
 
 google.maps.event.addListener（map，'click'，function（）{
 infowindow.close（）; 
}）; 
 
 //向地图添加标记
 //设置三个带有信息窗口的标记
 
 var point = new google.maps.LatLng（43.65654，-79.90138 ）; 
 var marker1 = createMarker（point，'Abc'）; 
 
 var point = new google.maps.LatLng（43.91892，-78.89231）; 
 var marker2 = createMarker（point，'Abc'）; 
 
 var point = new google.maps.LatLng（43.82589，-79.10040）; 
 var marker3 = createMarker（point，'Abc'）; 
 
 var markerArray = new Array（marker1，marker2，marker3）; 
 mc.addMarkers（markerArray，true）; 
 
 
} 
 
 var infowindow = new google.maps.InfoWindow（
 {
 size：new google.maps.Size（150 ，50）
}）; 
 
函数createMarker（latlng，html）{
 var image ='/321.png'; 
 var contentString = html; 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 icon：image，
 zIndex：Math.round（latlng .lat（）*  -  100000）<5 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（contentString）; 
 infowindow.open（map，marker）; 
}）; 
} 
 
 //]]> 
< / script> 
  

解决方案

以下是 jsfiddle demo

创建标记集群后，您需要添加标记。 MarkerClusterer支持使用 addMarker（）和 addMarkers（）方法或向构造函数提供一组标记来添加标记：

当他们说通过提供一个标记数组来添加标记到构造函数中时，它就像这样做：

  var markers = []; //创建一个存储标记的全局数组
 for（var i = 0; i <100; i ++）{
 var latLng = new google.maps.LatLng（data.photos [i] .latitude，
 data.photos [i] .longitude）; 
 var marker = new google.maps.Marker（{'position'：latLng}）; 
 markers.push（marker）; //将单个标记推入全局数组
} 
 var markerCluster = new MarkerClusterer（map，markers）; //创建clusterer并将全局标记数组推入其中。 
  

使用 addMarker（）来添加它基本上将它添加到集群中，如下所示：

pre $ var code $ var setCluster //在全局作用域上创建的集群对象

//做标记创建并像下面这样添加它：
markerCluster.addMarker（newMarker，true）; //如果指定true，它会重绘地图

或者如果你想添加一个数组：

  var markerCLuster //在全局范围创建的集群对象
 
 //创建标记并推入标记数组：
 markerCluster.addMarkers（newMarkers，true）; //如果指定true，它会重绘地图
  

以下是对 MarkerClusterer 和简单示例

基于你的代码片段，你会想要做这样的事情：

  var mcOptions = {gridSize ：50，maxZoom：15}; 
 var mc = new MarkerClusterer（map，[]，mcOptions）; 
 
 google.maps.event.addListener（map，'click'，function（）{
 infowindow.close（）; 
}）; 
 
 //向地图添加标记
 //设置三个带有信息窗口的标记
 
 var point = new google.maps.LatLng（43.65654，-79.90138 ）; 
 var marker1 = createMarker（point，'Abc'）; 
 
 var point = new google.maps.LatLng（43.91892，-78.89231）; 
 var marker2 = createMarker（point，'Abc'）; 
 
 var point = new google.maps.LatLng（43.82589，-79.10040）; 
 var marker3 = createMarker（point，'Abc'）; 
 
 var markerArray = new Array（marker1，marker2，marker3）; 
 mc.addMarkers（markerArray，true）; 
  

通过将所有标记命名为相同的var marker ，所以你实际上正在创建三个标记，并且每次将它存储在var标记中时都会被写入。所以我继续并重新命名你的标记。然后我创建了一个数组来存储它们并传递给MarkerClusterer。

$ b 更新：添加到 createMarker < code $>函数，你没有返回标记，然后，没有标记聚集：

  function createMarker latlng，html）{
 var contentString = html; 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 zIndex：Math.round（latlng.lat（）* -100000） << 5 
}）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（contentString）; 
 infowindow.open（map，marker）; 
}）; 
 
返回标记; 
} 
  

I'm having problems with adding marker clusterer functionality to my map. What I want is to use custom icon for my markers and every marker has its own info window which I want to be able to edit.

I did accomplish that, but now I have problems adding marker clusterer library functionality. I read something about adding markers to array, but I'm not sure what would it exactly mean. Besides, all of the examples with array I have found, don't have info windows and searching through the code I didn't find appropriate way to add them.

Here is my code (mostly from Geocodezip.com):

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <style type="text/css">
    html, body { height: 100%; } 
    </style>
<script type="text/javascript"> 
//<![CDATA[
var map = null;
function initialize() {
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787,-79.359741),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);

      google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
            });

      // Add markers to the map
      // Set up three markers with info windows 

          var point = new google.maps.LatLng(43.65654,-79.90138); 
          var marker1 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.91892,-78.89231);
          var marker2 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.82589,-79.10040);
          var marker3 = createMarker(point,'Abc');

          var markerArray = new Array(marker1, marker2, marker3);
          mc.addMarkers(markerArray, true);


}

var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function createMarker(latlng, html) {
    var image = '/321.png';
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

//]]>
</script> 

解决方案

Here is the working jsfiddle demo

Once you create a marker cluster, you will want to add markers to it. MarkerClusterer supports adding markers using the addMarker() and addMarkers() method or by providing a array of markers to the constructor:

When they say add marker to constructor by providing a array of markers it's similar to doing this:

var markers = [];  //create a global array where you store your markers
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);  //push individual marker onto global array
}
var markerCluster = new MarkerClusterer(map, markers);  //create clusterer and push the global array of markers into it.

To add it using addMarker() you basically add it to the cluster like the following:

var markerCluster //cluster object created on global scope

//do your marker creation and add it like this:
markerCluster.addMarker(newMarker, true); //if specify true it'll redraw the map

or if you want to add an array:

var markerCLuster //cluster object created on global scope

//do your marker creation and push onto array of markers:
markerCluster.addMarkers(newMarkers, true); //if specify true it'll redraw the map

Here is the reference to MarkerClusterer and Simple Examples

Based on snippet of your code you would want to do something like this:

    var mcOptions = {gridSize: 50, maxZoom: 15};
     var mc = new MarkerClusterer(map, [], mcOptions);

      google.maps.event.addListener(map, 'click', function() {
            infowindow.close();
            });

      // Add markers to the map
      // Set up three markers with info windows 

          var point = new google.maps.LatLng(43.65654,-79.90138); 
          var marker1 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.91892,-78.89231);
          var marker2 = createMarker(point,'Abc');

          var point = new google.maps.LatLng(43.82589,-79.10040);
          var marker3 = createMarker(point,'Abc');

          var markerArray = new Array(marker1, marker2, marker3);
          mc.addMarkers(markerArray, true);

You aren't creating your makers correctly by naming all your marker to the same var marker so you are actually creating three markers and it gets over written when you store it in the var marker every time. So i went on and rename your markers. I then created an array to store them and pass on to the MarkerClusterer.

UPDATE: to your createMarker function, you didn't return the marker and then, there's no marker to cluster:

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    return marker;
}

这篇关于添加简单的标记clusterer谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！