javascript Google Maps MarkerClusterer 要么不起作用,要么隐藏了所有标记

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18945314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 13:46:14  来源:igfitidea点击:

Google Maps MarkerClusterer either doesn't work or hides all markers

javascriptgoogle-mapsgoogle-maps-api-3

提问by Louis Maddox

...depending on where I put the line

...取决于我把线放在哪里

var mc = new markerclusterer(map);

If it goes where the examples seem to suggest - right after "var map" is introduced - all the markers disappear (example running here).

如果它出现在示例似乎建议的位置 - 在引入“var map”之后 - 所有标记都会消失(示例在此处运行)。

A version without the mc variable runs with all markers visible.

没有 mc 变量的版本在所有标记都可见的情况下运行。

When the mc variable is introduced after the google.maps.event.addListener function as shown here, it seems also to cancel its effect and markers are shown.

当如图所示的MC变量在google.maps.event.addListener功能推出后在这里,它似乎也消除其影响,并标记显示。

The locations variable is an array containing geolocation data and ready-formatted HTML (produced in a spreadsheet) for all points on the map, which is passed to the markers to place them.

location 变量是一个数组,其中包含地图上所有点的地理定位数据和已格式化的 HTML(在电子表格中生成),这些 HTML 将传递给标记以放置它们。

I think the issue may be that to be used with the markerclusterer the array is referring to the geolocation data, when it should refer to markers? I've seen other people using a variable markerarray, but I'm worried if I mess with it I'll break the html and geolocation extraction part of the code.

我认为问题可能是与标记集群一起使用时,数组指的是地理定位数据,何时应该指代标记?我见过其他人使用变量标记数组,但我担心如果我弄乱了它,我会破坏代码的 html 和地理定位提取部分。

Can anyone help explain why var mc is failing? I've loaded http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.jsin the header, so it should work and I can't see any syntax errors in my code.

任何人都可以帮助解释为什么 var mc 失败?我已经在标头中加载了http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js,所以它应该可以工作,我看不到任何语法错误在我的代码中。

This is the first thing I've made with JS and it's great but I just want to finish it off with the marker clusters now ! Help would be much appreciated.

这是我用 JS 做的第一件事,它很棒,但我现在只想用标记集群来完成它!帮助将不胜感激。

EDIT:I also tried playing with thisbut like I say the array here is two-fold to my understanding, so I couldn't get it to work:

编辑:我也试过玩这个,但就像我说这里的数组对我的理解是双重的,所以我无法让它工作:

The suggestion:

建议:

...
var infowindow = new google.maps.InfoWindow();

var marker, i;
map.markers = []; // ADD THIS LINE
for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
    });
    map.markers.push(marker); // ADD THIS LINE
...

Snippet of my code:

我的代码片段:

...
var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
...

回答by geocodezip

You have 2 problems.

你有2个问题。

  1. you never add your markers to the MarkerClusterer

    var markers=[];
    for (var i = 0; i < locations.length; i++) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
    
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
      markers.push(marker);
    }
    var mc = new MarkerClusterer(map, markers);
    
  2. markerclusterer has the incorrect case (javascript is case sensitive), it should be MarkerClusterer.

  1. 您永远不会将标记添加到MarkerClusterer

    var markers=[];
    for (var i = 0; i < locations.length; i++) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
    
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
      markers.push(marker);
    }
    var mc = new MarkerClusterer(map, markers);
    
  2. markerclusterer 的大小写不正确(javascript 区分大小写),它应该是 MarkerClusterer。

working example

工作示例

回答by MichaC

markerclusterer is not the correct casing.

markerclusterer 不是正确的大小写。

the object is "MarkerClusterer" JavaScript is case sensitive!

对象是“MarkerClusterer” JavaScript 区分大小写!

The samples also look slightly different then your code:

这些示例看起来也与您的代码略有不同:

markerClusterer = new MarkerClusterer(map, markers, {
      maxZoom: zoom,
      gridSize: size,
      styles: styles[style]
    });

for example

例如