我有一张基于群集的标记的地图。当用户点击具有超过100个标记的群集时,我想要一种方法,不要放大并执行其他操作,例如我打开弹出窗口;否则只是贬低。
在加载页面上,我正在调用服务并获取具有位置的客户列表。我正在将客户传递给Clustering功能。现在,当用户点击群集时,我想提出一些条件。如果为true则打开一个弹出窗口,但不要放大,也不要放大。我无法做到这一点。这是代码
customers.html客户
<div [hidden]="!MapView" style="height: 100%" #map id="map"></div>
Customers.ts
@ViewChild('map') mapElement: ElementRef;
ngOnInit() {
this.initMap();
}
initMap = () => {
this._customerservice.GetCustomersWithLocations().subscribe(res => {
if (res != null || res != undefined) {
this.CustomersLocation = res;
let latLng = new google.maps.LatLng(-31.563910, 147.154312);
let mapOptions = {
center: latLng,
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN,
fullscreenControl: false
}
setTimeout(() => { // LOAD THE MAP FIRST
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}, 1000);
setTimeout(() => { //LOAD THE CLUSTER
this.mapCluster.addCluster(res, this.map);
}, 3000);
}
}, error => {
}, () => {
});
}
GoogleMapsCluster.ts
addCluster(Customers: any, map) {
//console.log(Customers);
if (google.maps) {
//Convert locations into array of markers
let markers = Customers.map((location) => {
var marker = new google.maps.Marker({
position: location.loc,
label: location.name,
});
return marker;
});
this.markerCluster = new MarkerClusterer(map, markers, { imagePath: 'assets/m' });
google.maps.event.addListener(this.markerCluster, 'clusterclick', (cluster) => {
var markers = cluster.getMarkers();
var CustomerInsideCluster = [];
for (var i = 0; i < markers.length; i++) {
CustomerInsideCluster.push({BusinessName: markers[i].label})
}
this.OpenCustomerDetails(CustomerInsideCluster);
//I OPEN A POPUP HERE. I DONT WANT TO ZOOM IN TO DECLUSTER. AT THEN END IF THE CLUSTER HAS MORE THAN 100 CUSTOMERS I DONT WANT TO ZOOM IN WHEN I CLICK ON IT.
//map.setZoom(8); GIVING ME ERROR
});
} else {
console.warn('Google maps needs to be loaded before adding a cluster');
}
}
OpenCustomerDetails(Customers: any) {
let popover = this.popoverCtrl.create(MapPopover, { Customers: Customers }, { cssClass: 'custom-popover' });
popover.present({
ev: event
});
}
答案 0 :(得分:3)
这是可能的解决方案。只需将markerClusterer
属性zoomOnClick
设置为false
即可。
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
zoomOnClick: false
});
在clusterclick
事件中,将counter
对象传递给callback function
,并根据您的要求使用条件语句,打开infowindow
(否则,如果您喜欢)。
markerCluster.addListener('clusterclick', function(cluster){
if (markers.length > 5){ // change #5 if you need to test different scenarions
infowindow.setPosition(cluster.getCenter());
infowindow.setContent("Simple Test");
infowindow.open(map);
}
如果标记小于或大于所需参数,请再次将zoomOnClick
重置为true
并使用以下map
和clusterObject
方法:
else {
markerCluster.zoomOnClick = true;
map.fitBounds(cluster.getBounds());
}