谷歌地图API V3-标记聚合器未定义

10

我按照库和YouTube指南将标记聚合器添加到我的地图上,但是出现了问题。

MarkerClusterer undefined

我按照指南定义了MarkerClusterer,但仍然出现上述错误。以下是我的代码

<!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemasmicrosoft-
com:vml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8" />
<title>Ma Page de Google Maps V3</title>
<style>
        html, body, #map_canvas {
    margin: 3;
    padding: 3;
    height: 100%;
  }
</style>
<style type="text/css">
    .tooltip {
    background-color:#ffffff;
    font-weight:bold;
    border:2px #006699 solid; 
    width:150px}
</style>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://www.google.com/jsapi"></script>
<script src="../src/data.json" type="text/javascript"></script>
<script type="text/javascript">
  var script = '<script type="text/javascript" src="../src/markerclusterer';
  if (document.location.search.indexOf('compiled') !== -1) {
    script += '_compiled';
  }
  script += '.js"><' + '/script>';
  document.write(script);
</script>
<script>
var trace_markers= [];
var markerCluster= null;
function Trace_Pin(Lat, Long, immat, type, site, vitesse, date)
{ 
var image_trace = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal3/icon61.png',
    new google.maps.Size(32, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(16, 16));

  var vehlatlng = new google.maps.LatLng(Lat, Long) ;
  var trace_marker = new google.maps.Marker({
     position: vehlatlng,
     icon: image_trace  });
  trace_marker.tooltip_html = '<div class="tooltip">' + 'Date : ' + date + '<br>' + 'Vitesse : ' + vitesse + ' km/h' + '<br>' + '<\/div>';    
  trace_markers.push(trace_marker);
  markerCluster = new MarkerClusterer(map, trace_markers);
  Liste_Points.push(trace_marker.getPosition());
  TraceBounds.extend(trace_marker.position);
  }
</script>

我错在哪里了?


你确定你的 markerclusterer.js / markerclusterer_compiled.js 文件被正确调用了吗?在尝试引用 MarkerClusterer 类之前,你需要进行任何初始化操作吗? - duncan
另外,你从哪里调用Trace_Pin函数?从这段代码中看不出来 - 也许你需要调整一下,在尝试调用该函数之前等待markercluster JS文件加载完成? - duncan
1
我发现需要从谷歌库下载markerclusterer.js文件,[http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js],并将其上传到服务器,然后只需添加`<script src="markerclusterer.js" type="text/javascript"></script>`即可解决问题。感谢您的帮助 :) - dswong
关于编译,我从一个例子中复制了代码,我的错。Trace_Pin是一个函数,在我程序中点击按钮时调用它。 - dswong
6个回答

19
我发现我需要从Google库中下载markerclusterer.js文件,http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js,然后上传到服务器,最后只需将其添加到代码中即可解决问题。感谢您的帮助 :)
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://www.google.com/jsapi"></script>
<script src="../src/data.json" type="text/javascript"></script>
<script type="text/javascript">
var script = '<script type="text/javascript" src="../src/markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
  script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>

随着这个

<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="markerclusterer.js" type="text/javascript"></script>

这样做解决了问题,但有人能解释一下加载此脚本时异步问题的原因吗?因为有时刷新后它不起作用,但刷新缓存总是有效的。 - Serey
1
链接已损坏,请在此处找到它:https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js,有关作为CDN使用的更多信息,请参见此处https://dev59.com/kloU5IYBdhLWcg3wu4ji - Fanky

12

我按照文档中的两个步骤解决了这个问题。

  1. 添加CDN链接 <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
  2. new MarkerClusterer({ markers, map }); 更改为 new markerClusterer.MarkerClusterer({ markers, map });

希望这能帮助有需求的人,因为它在谷歌文档中没有提到。


3

我刚刚添加了marker cluster plus宝石(gem)到我的列表中,然后它开始工作了!

在您的Gemfile中,添加以下行:

gem 'markerclustererplus-rails'

您可以通过在javascript文件中添加以下内容来包含它:

//= require markerclusterer

参考: https://github.com/RogerE/markerclustererplus-rails


1

1
请使用注释而不是将其作为答案发布。 - Viresh Mathad

0

对我来说,问题似乎在于最初的Google文档(对我无效)与后来的示例不同(这些示例可以正确地运行)。

参考https://developers.google.com/maps/documentation/javascript/marker-clustering

示例JS: new MarkerClusterer({ markers, map });

滚动到此处:https://developers.google.com/maps/documentation/javascript/marker-clustering#adding-a-marker-clusterer

CDN 示例如下: const markerCluster = new markerClusterer.MarkerClusterer({ map, markers });

我不确定他们的JS Fiddle(https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/marker-clustering/jsfiddle)是如何工作的,但对于我来说,使用markerClusterer.MarkerClusterer()就可以解决问题。


0
在我的情况下,问题是由于 CSP 阻止了脚本。
我使用 helmet 来指定可以通过我的网站访问哪些 URL。
我只需将 'https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js' 添加到 scriptSrc 列表中,它就可以工作了。
从文档中可以看到:

enter image description here


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接