关键词:
【中文标题】Google Map API V3-MarkerCluster 未定义【英文标题】:Google Map API V3- MarkerClusterer undefined 【发布时间】:2013-06-15 18:00:04 【问题描述】:我按照图书馆和 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 类之前,是否需要对其进行初始化? 另外,你从哪里调用 Trace_Pin 函数?这在这段代码中并不明显 - 您是否需要调整它以等待 markercluster JS 文件在尝试调用该函数之前加载? 我发现我需要从谷歌库 [google-maps-utility-library-v3.googlecode.com/svn/trunk/… 下载 markerclusterer.js 并将其上传到服务器,然后只需将其添加到<script src="markerclusterer.js" type="text/javascript"></script>
即可解决问题。感谢您的帮助:)
关于编译的,我从一个例子中复制过来的,我的不好。 Trace_Pin 是我在程序中单击按钮时调用的函数。
【参考方案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>
【讨论】:
这修复了它,但有人可以解释加载此脚本背后的异步问题吗?因为有时刷新时它不起作用,但刷新缓存总是有效的。 链接坏了,在这里找到它:cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/…,更多关于使用 cdn 的信息在这里***.com/questions/37180731/…【参考方案2】:我刚刚将标记集群和 gem 添加到我的列表中,它开始工作了!
在您的 Gemfile 中,添加以下行:
gem 'markerclustererplus-rails' 您可以通过将以下内容添加到您的 javascript 文件中来包含它:
//= 需要markerclusterer
参考: https://github.com/RogerE/markerclustererplus-rails
【讨论】:
【参考方案3】:我的问题是脚本因为 CSP 而被阻止。
我使用头盔来指定可以通过我的网站访问哪些 URL。
我刚刚添加了“https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js” 到 scriptSrc 列表,它工作。
来自文档:
【讨论】:
RefererNotAllowedMapError Google Map API [重复]
】RefererNotAllowedMapErrorGoogleMapAPI[重复]【英文标题】:RefererNotAllowedMapErrorGoogleMapAPI[duplicate]【发布时间】:2016-11-1902:16:29【问题描述】:昨天我尝试将GoogleMap放在网站上(javascript),但我仍然收到GoogleMapsAPI错误:RefererNotAllowedMapError... 查看详情
使用 google map javascript api v3 在 google map 上添加多个目的地
】使用googlemapjavascriptapiv3在googlemap上添加多个目的地【英文标题】:Addingmorethanonedestinationongooglemapusinggooglemapjavascriptapiv3【发布时间】:2011-02-0705:23:47【问题描述】:我想添加多个目的地,保持相同的来源,并一次获得到所有目... 查看详情
Google Map 中的“您已超出此 API 的请求配额”[重复]
】GoogleMap中的“您已超出此API的请求配额”[重复]【英文标题】:"YouhaveexceededyourrequestquotaforthisAPI"inGoogleMap[duplicate]【发布时间】:2019-01-1202:33:27【问题描述】:我目前正在使用react-google-map让GoogleMap在我的React项目中运行... 查看详情
根据您执行的国家/地区,Google Map Api 会丢失精度
】根据您执行的国家/地区,GoogleMapApi会丢失精度【英文标题】:GoogleMapApiloosesprecisiondependingthecountryyouexecute【发布时间】:2012-08-1709:53:13【问题描述】:我正在使用http://code.google.com/p/php-google-map-api/。我做了一个应用程序来获取... 查看详情
Google Map Autocomplete API 未添加地址选项
】GoogleMapAutocompleteAPI未添加地址选项【英文标题】:GoogleMapAutocompleteAPInotaddingaddressoptions【发布时间】:2016-11-0716:03:27【问题描述】:我正在尝试在使用asp.net构建的网站上实现此https://developers.google.com/maps/documentation/javascript/exampl... 查看详情
如何在 android 上使用 google map api 获取 google 驾驶指令?
】如何在android上使用googlemapapi获取google驾驶指令?【英文标题】:Howtogetgoogledrivinginstructionusinggooglemapapionandroid?【发布时间】:2011-07-1311:53:36【问题描述】:我是android编程的新手。我已经阅读了许多有趣的驾驶方向应用程序。... 查看详情
wordpress 高级自定义字段 google map api key
】wordpress高级自定义字段googlemapapikey【英文标题】:wordpressadvancedcustomfieldsgooglemapapikey【发布时间】:2016-11-1123:08:49【问题描述】:我在使用高级自定义字段插件加载谷歌地图时遇到问题。我在https://www.advancedcustomfields.com/resources... 查看详情
捕获 Google Map Android API V2 的屏幕截图
】捕获GoogleMapAndroidAPIV2的屏幕截图【英文标题】:CapturescreenshotofGoogleMapAndroidAPIV2【发布时间】:2012-11-2606:07:44【问题描述】:最终更新Google已满足功能请求。请看thisanswerbelow.原始问题使用旧版本的GoogleMapsAndroidAPI,我能够截取go... 查看详情
Google Map API - 移除标记
】GoogleMapAPI-移除标记【英文标题】:GoogleMapAPI-RemovingMarkers【发布时间】:2013-05-0504:17:28【问题描述】:我已尝试查看此处和GoogleMapsAPI文档中的各种代码块,但仍然无法弄清楚如何隐藏标记。这是我正在使用的当前代码,它适用... 查看详情
Google Map API 如何为当前位置设置标记
】GoogleMapAPI如何为当前位置设置标记【英文标题】:GoogleMapAPIhowtosetmarkerforcurrentlocation【发布时间】:2014-03-2511:20:40【问题描述】:我正在学习googlemapAPI,当我尝试将当前坐标添加到数组时遇到了这个问题。这是我的代码:varloca... 查看详情
地形高度 Google Map Api v2
】地形高度GoogleMapApiv2【英文标题】:HeightofterrainGoogleMapApiv2【发布时间】:2013-05-1220:30:47【问题描述】:和倾斜一样,有没有办法从谷歌地图中获取地形的高度?我知道像Endomondo这样的应用程序使用以米为单位的区域轮廓。我... 查看详情
应用运行时 Flutter Google Map API 问题
】应用运行时FlutterGoogleMapAPI问题【英文标题】:FlutterGoogleMapAPIIssuewhenAppRuns【发布时间】:2020-07-0110:55:14【问题描述】:我目前正在开发一个用于跟踪患者的应用程序。所以我使用谷歌地图,我从谷歌云平台获取了API密钥,并限... 查看详情
如何在现有较旧的 android 项目中使用最新 API 添加 Google Map?
】如何在现有较旧的android项目中使用最新API添加GoogleMap?【英文标题】:HowtoaddGoogleMapinusinglatestAPIinanexistingolderandroidproject?【发布时间】:2019-02-2722:56:30【问题描述】:我有一个旧的Android项目,我在其中使用了LocationAPI和Google地... 查看详情
Google Map Road API 没有插入路径,也没有给出平滑的路线
】GoogleMapRoadAPI没有插入路径,也没有给出平滑的路线【英文标题】:GoogleMapRoadAPInotinterpolatingpathandnotgivingsmoothroute【发布时间】:2016-07-0117:20:37【问题描述】:我正在尝试使用RoadsInspector中的道路API为以下路线路径获得顺畅的路... 查看详情
Google MAP API,对 MarkerClusterer 的限制
】GoogleMAPAPI,对MarkerClusterer的限制【英文标题】:GoogleMAPAPI,limitontheMarkerClusterer【发布时间】:2018-05-0707:04:47【问题描述】:我有一张包含大约2000个标记的地图。我正在使用MarkerClusterer系统来加入他们并只显示我需要的内容。但... 查看详情
使用google map direction api android计算两个位置之间的距离
】使用googlemapdirectionapiandroid计算两个位置之间的距离【英文标题】:Calculatethedistancebetweentwopositionsusinggooglemapdirectionapiandroid【发布时间】:2016-01-0119:08:45【问题描述】:我想从谷歌距离api计算两点之间的计算。有任何实现源代... 查看详情
捕获 Google Map Android API V2 的屏幕截图
】捕获GoogleMapAndroidAPIV2的屏幕截图【英文标题】:CapturescreenshotofGoogleMapAndroidAPIV2【发布时间】:2012-11-2606:07:44【问题描述】:最终更新Google已满足功能请求。请看thisanswerbelow.原始问题使用旧版本的GoogleMapsAndroidAPI,我能够截取... 查看详情
Google Map API 不在发布模式下工作
】GoogleMapAPI不在发布模式下工作【英文标题】:GoogleMapAPIisnotworkingonreleasemode【发布时间】:2021-12-2321:55:14【问题描述】:我在我的安卓系统中使用谷歌地图。它工作正常。今天我实现了GooglePlacesAPI,之后当我构建发布APK时,地... 查看详情