Google Map API V3-MarkerClusterer 未定义

Question

我按照图书馆和 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>

我哪里做错了？

Answer 1

我发现我需要从谷歌库下载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>

Answer 2

我使用docs中提到的两个步骤解决了这个问题。

添加cdn链接

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

从

new MarkerClusterer({ markers, map });

更改为

new markerClusterer.MarkerClusterer({ markers, map });

我希望它能帮助别人，因为谷歌的文档中没有提到。

Answer 3

我刚刚将标记簇和 gem 添加到我的列表中，它开始工作！

在您的 Gemfile 中，添加以下行：

gem 'markerclustererplus-rails' 您可以通过将以下内容添加到您的 javascript 文件中来包含它：

//= 需要标记集群

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

Answer 4

Inshal 是对的。 Google 文档需要更新。这有效

添加cdn链接脚本https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js

更改自

new MarkerClusterer({ markers, map });

到

new markerClusterer.MarkerClusterer({ markers, map });

Answer 5

我的问题是脚本由于 CSP 被阻止。

我使用头盔来指定可以通过我的网站访问哪些 URL。

我刚刚添加了“https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js” 到 scriptSrc 列表并且它起作用了。

来自文档：

Answer 6

对我来说，问题似乎是最初的 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 小提琴（https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/marker-clustering/jsfiddle）看起来如何工作，但对我来说使用

markerClusterer.MarkerClusterer()

就成功了。

Google Map API V3-MarkerClusterer 未定义

问题描述投票：0回答：6

6个回答

最新问题

Google Map API V3-MarkerClusterer 未定义

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6