正文 

当前位置： 首页 > 问答 >

将简单的标记聚类器添加到谷歌地图

     2023-02-23     105

关键词：

【中文标题】将简单的标记聚类器添加到谷歌地图【英文标题】：Adding simple marker clusterer to google map 【发布时间】：2011-07-12 15:03:48 【问题描述】：

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

我确实做到了，但现在我在添加标记聚类库功能时遇到了问题。我读了一些关于向数组添加标记的内容，但我不确定它到底意味着什么。此外，我发现的所有带有数组的示例都没有信息窗口，并且通过代码搜索我没有找到合适的方法来添加它们。

这是我的代码（主要来自 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>

【问题讨论】：

【参考方案1】：

这是工作的jsfiddle demo

创建标记集群后，您需要向其中添加标记。 MarkerClusterer 支持使用addMarker() 和addMarkers() 方法添加标记，或者向构造函数提供标记数组：

当他们说通过提供标记数组向构造函数添加标记时，类似于这样做：

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.

要使用addMarker() 添加它，您基本上可以将它添加到集群中，如下所示：

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

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

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

这里是对MarkerClusterer和Simple Examples的引用

根据你的代码的 sn-p，你会想要做这样的事情：

    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 marker 来正确创建制造商，因此您实际上是在创建三个标记，并且每次将其存储在 var 标记中时都会被覆盖。所以我继续重命名你的标记。然后我创建了一个数组来存储它们并传递给 MarkerClusterer。

更新：对于您的 createMarker 函数，您没有返回标记，然后，没有要聚类的标记：

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;

【讨论】：

@kjy112 感谢您的回答。我按照您的建议更改了代码，但仍然只有 3 个自定义图标可见。当我缩小时，没有任何变化，没有集群图标。我用当前代码更新了我的问题。 @take2 你是怎么设置集群的？ @kjy112 我不确定你的意思。使用 var mcOptions = gridSize: 50, maxZoom: 15; var mc = new MarkerClusterer(map, [], mcOptions); var markerArray = new Array(marker1, marker2, marker3); mc.addMarkers(markerArray, true); @take2 您的 creatMarker 函数有问题...没有返回标记。我让它工作请看看我的jsfiddle和答案。如果它回答了您的问题，请投票并接受答案。 @NowI'monFBalso np 希望这有帮助

将 CSS 样式标记添加到谷歌地图

】将CSS样式标记添加到谷歌地图【英文标题】：AddCSSstyledmarkertogooglemaps【发布时间】：2014-02-0921:35:17【问题描述】：谁能告诉我如何将thisanimatedmarker添加到下面的谷歌地图API。以下是标准的谷歌地图api代码，带有为标记（图标）... 查看详情

如何通过android中的json将唯一图像添加到谷歌地图上各种数量的自定义标记

...id中的json将唯一图像添加到谷歌地图上各种数量的自定义标记【英文标题】：Howtoadduniqueimagestovariousnumberofcustommarkersongooglemapviajsoninandroid【发布时间】：2014-10-1809:23:39【问题描述】：我是Android初学者。我的应用程序中有一个谷歌... 查看详情

将数据库中的多个纬度/经度点加载到谷歌地图标记中的好方法？

】将数据库中的多个纬度/经度点加载到谷歌地图标记中的好方法？【英文标题】：Goodwaytoloadmultiplelat/longpointsfromadatabaseintogooglemapmarkers?【发布时间】：2011-03-1618:24:18【问题描述】：我有一个包含多个地址的表格，包括它们的纬... 查看详情

谷歌地图标记比较

】谷歌地图标记比较【英文标题】：Googlemapmarkerscomparison【发布时间】：2018-11-1909:01:00【问题描述】：我将标记添加到谷歌地图。并将参考作为我班级的字段。MarkerOptionsmarkerOptions=newMarkerOptions();markerOptions.position(position).icon(BitmapD... 查看详情

将 Kml 图层添加到谷歌地图

】将Kml图层添加到谷歌地图【英文标题】：AddingKmlLayertogooglemap【发布时间】：2012-04-1902:51:33【问题描述】：我正在尝试将几个KML图层添加到地图中。这是我的代码：varmyKmlOptions=preserveViewport:true,suppressInfoWindows:truevarkmlLayer_1=newgoog... 查看详情

将实时数据从 Firebase DB 检索到谷歌地图的问题

...检索实时位置数据，并在Google地图中为每个用户显示多个标记。这是我的Firebase数据库的结构：这是谷歌地图活动的代码：publicclassCyclis 查看详情

谷歌地图标记聚类不适用于缩小

】谷歌地图标记聚类不适用于缩小【英文标题】：GoogleMapMarkerClusteringnotWorkingonzoomout【发布时间】：2018-11-2504:29:15【问题描述】：我正在尝试在Javascript中使用Google地图标记聚类。我对此很陌生。场景我从数据库中获取大量数据，... 查看详情

如何在快速使用标记聚类时将注释视图添加到我的苹果地图上的图钉？

...：2016-02-2814:41:24【问题描述】：我正在使用从这里获取的简单标记簇https://github.com/ribl/FBAnnotationClusteringSwift我看 查看详情

如何将引脚添加到谷歌地图地理编码 api

】如何将引脚添加到谷歌地图地理编码api【英文标题】：Howtoaddpinstothegooglemapsgeocodeapi【发布时间】：2015-06-0616:57:14【问题描述】：我正在尝试将这三件事合二为一。http://jsfiddle.net/Dansker/hk5fgbzr/3/（小提琴1）http://jsfiddle.net/Dansker/... 查看详情

如何在 Xamarin Forms 中实现标记聚类（谷歌地图）

】如何在XamarinForms中实现标记聚类（谷歌地图）【英文标题】：HowtoimplementMarkerClustering(Googlemaps)inXamarinForms【发布时间】：2017-12-1214:25:29【问题描述】：我正在尝试在Xamarin表单中实现AndroidMapsUtils库。我想在android项目的地图上使... 查看详情

使用android将图像加载到地图标记中

】使用android将图像加载到地图标记中【英文标题】：LoadImageintomapMarkerusingandroid【发布时间】：2016-04-1402:51:48【问题描述】：我正在尝试将位图添加到谷歌地图标记图标。下面是我将图像添加到标记图标的代码。由于位图大小，... 查看详情

如何将图块添加到谷歌地图并为其设置动画，即不断用新图块替换它们

】如何将图块添加到谷歌地图并为其设置动画，即不断用新图块替换它们【英文标题】：Howtoaddtilestogooglemapandanimatingthemi.ereplacingthemwiithnewtilescontinuously【发布时间】：2016-08-1310:15:08【问题描述】：我正在从缓存中向Google地图添加... 查看详情

将远程 api json 数据显示到谷歌地图中

】将远程apijson数据显示到谷歌地图中【英文标题】：Displayremoteapijsondataintogooglemaps【发布时间】：2021-11-0310:45:51【问题描述】：我正在尝试将远程apijson显示到谷歌地图中。目前的代码与位于同一脚本中的localjson一起使用，但是... 查看详情

谷歌标记聚类。如何将此库添加到项目中？迅速

】谷歌标记聚类。如何将此库添加到项目中？迅速【英文标题】：GoogleMarkerClustering.Howtoaddthislibtoproject?Swift【发布时间】：2020-02-2720:42:30【问题描述】：关于安装GoogleMarkerClustering库有多个说明，例如：https://developers.google.com/maps/d... 查看详情

如何将带有坐标的数据库链接到谷歌地图

】如何将带有坐标的数据库链接到谷歌地图【英文标题】：HowtolinktodatabasewithcoordinatestoaGoogleMap【发布时间】：2010-10-2918:56:48【问题描述】：我有一个巨大的数据库，其中包含-73.9637,40.7683等地理坐标+显示我们世界某些部分的Google... 查看详情

使用适用于 iOS 的谷歌地图 SDK 进行标记聚类？

】使用适用于iOS的谷歌地图SDK进行标记聚类？【英文标题】：MarkerclusteringwithgooglemapsSDKforiOS?【发布时间】：2013-12-0903:33:13【问题描述】：我在我的iOS应用程序中使用GoogleMapsSDK，我需要对彼此非常接近的标记进行分组-基本上需要... 查看详情

如何将点保存到谷歌地图

】如何将点保存到谷歌地图【英文标题】：HowtosaveapointtoGoogleMaps【发布时间】：2019-07-2122:29:47【问题描述】：我正在寻找一种解决方案，该解决方案可以让我根据纬度和经度坐标在地图上保存地址，以便我可以直接在我的程序中... 查看详情

使用当前位置将折线绘制到目的地，并在谷歌地图上添加标记，标记颤动

...使用当前位置将折线绘制到目的地，并在谷歌地图上添加标记，标记颤动【英文标题】：Usecurrentlocationtodrawpolylinestoadestinationandalsotoaddmarkersongooglemapswithmarkersflutter【发布时间】：2021-09-2311:53:11【问题描述】：我有一个带有谷歌地... 查看详情