Google Maps MarkerCluster API:如何在屏幕'视图之外获取集群
Google Maps MarkerCluster API: How to get clusters outside of screen's view?
我有一个使用谷歌地图和MarkerCluster API的网页。我需要能够得到所有的集群在地图上给定的缩放级别。以以下代码为例:
//Where the center of the screen will be
var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
'zoom': 13,
'center': center,
//Google map type
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
//Create the google map
var map = new google.maps.Map(document.getElementById("map"), options);
//Create the marker clusters, where markers is an array of lat and longs
var mc = new MarkerClusterer(map, markers);
//Print all of the clusters at zoom level 13
console.log(mc.getTotalClusters());
问题是,如果缩放级别为13的集群有10个,但只有7个在屏幕的边界内,那么上面的代码只会打印出7个。我需要一种方法来访问所有集群,即使它们不在屏幕上。
MarkerClusterer工作原理的简单例子:https://googlemaps.github.io/js-marker-clusterer/examples/simple_example.html
下面是一些关于MarkerCluster API的引用:
https://googlemaps.github.io/js-marker-clusterer/docs/reference.html https://googlemaps.github.io/js-marker-clusterer/docs/examples.html https://developers.google.com/maps/articles/toomanymarkers实际上,getTotalClusters
函数只返回当前视口中可见的标记的群集数量。
获得集群总数的一个选项是通过重写创建集群的函数来禁用检查标记是否位于当前视图内:
MarkerClusterer.prototype.createClusters_ = function() {
if (!this.ready_) {
return;
}
for (var i = 0, marker; marker = this.markers_[i]; i++) {
//if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {
if (!marker.isAdded) {
this.addToClosestCluster_(marker);
}
}
};
工作示例
MarkerClusterer.prototype.createClusters_ = function() {
if (!this.ready_) {
return;
}
for (var i = 0, marker; marker = this.markers_[i]; i++) {
//if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {
if (!marker.isAdded) {
this.addToClosestCluster_(marker);
}
}
};
function initMap(data) {
var center = new google.maps.LatLng(59.339025,18.065818);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0; i < data.photos.length; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' });
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log("Total number of clusters: " + markerCluster.getTotalClusters());
});
}
google.maps.event.addDomListener(window, 'load',
function(){
$.getJSON("https://gist.githubusercontent.com/vgrem/fb601469049c4be809ad4ea4bbcdc381/raw/data.json")
.success(function(data) {
initMap(data);
});
});
body {
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 600px;
}
#map {
width: 600px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div id="map-container"><div id="map"></div></div>
恰好
相关文章:
- 无法在mvc视图中使用ajax调用获取操作返回的模型对象列表
- Ui路由器:获取控制器中视图的名称
- 从youtube获取视图
- 每隔5秒从数据库获取数据,并通过AJAX将其发送到视图
- 获取特定视图的项目计数
- ExtJS 4.2如何获取视图的所有存储
- Ember.js路由器,从视图获取路由器
- 在angularJS中从树视图获取叶节点深度
- 从 sproutcore 中的父视图获取数组
- 在asp.net mvc 3中,如何在不刷新页面的情况下从部分视图获取值到父视图
- 从Ember视图获取模型属性
- 木偶.js - 项目视图获取父区域引用
- Ajax将JavaScript变量添加到Django视图获取:AttributeError:'WSGIREQUE
- 如何从一个视图获取更改值事件以触发另一个视图中的方法
- 正在从Web视图获取用户触摸的元素
- 从模型到视图获取数组
- 无法从ASP MVC中的视图获取更新的数据
- 如何从视图获取值到控制器
- 从组件视图获取块内容
- 无法用Angular从HTML视图获取值到控制器.解决方案返回$scope变量undefined