php - markerclusterer 不工作 php mysql json
问题描述
需要工作的 MarkerClusterer。我按照示例https://googlemaps.github.io/js-marker-clusterer/docs/examples.html
它不适合我。
我的源代码
var buildings_map = <?php echo json_encode( $buildings_map ) ?>;
var infobox = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
function setMarker(building) {
var latlng = new google.maps.LatLng(parseFloat(building.lat), parseFloat(building.lng));
console.log(latlng);
bounds.extend(latlng);
var buildingMarkers = new google.maps.Marker({
position: {lat: parseFloat(building.lat), lng: parseFloat(building.lng)},
map: map,
title: building.name
});
markerCluster = new MarkerClusterer(map, buildingMarkers);
google.maps.event.addListener(buildingMarkers, 'click', function () {
infobox.close();
infobox.setContent(building.content);
infobox.open(map, buildingMarkers);
});
google.maps.event.addListener(infobox, 'domready', function () {
var iwOuter = $('.gm-style-iw');
解决方案
您正在 setMarker 函数中创建 markerClusterer。它将继续为每个建筑标记重新初始化 markerClusterer。
在 for 循环之后移动 markerClusterer 创建。此外,我将 setMarker 函数移到了 initMap 函数之外。
您可以替换脚本中的以下代码并进行测试。
<script>
var markersArray = new Array();
function initMap() {
var centerMap = <?php echo json_encode( $centerMap ) ?>;
var map = new google.maps.Map(document.getElementById('map-imoveis'), {
zoom: 4,
center: {lat: parseFloat(centerMap.lat), lng: parseFloat(centerMap.lng)},
zoomControl: true,
language: 'pt-br'
});
var buildings_map = <?php echo json_encode( $buildings_map ) ?>;
var infobox = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
for (building in buildings_map) {
if (buildings_map.hasOwnProperty(building)) {
setMarker(buildings_map[building]);
}
console.log(buildings_map[building]);
}
// J - CREATE MARKER CLUSTER USING THE MARKERS ARRAY
var markerCluster = new MarkerClusterer(map, markersArray, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01);
bounds.extend(extendPoint1);
bounds.extend(extendPoint2);
}
map.fitBounds(bounds);
}
function setMarker(building) {
var latlng = new google.maps.LatLng(parseFloat(building.lat), parseFloat(building.lng));
console.log(latlng);
bounds.extend(latlng);
var buildingMarkers = new google.maps.Marker({
position: {lat: parseFloat(building.lat), lng: parseFloat(building.lng)},
map: map,
title: building.name
});
// J - ADD MARKER TO THE ARRAY.
markersArray.push(marker);
google.maps.event.addListener(buildingMarkers, 'click', function () {
infobox.close();
infobox.setContent(building.content);
infobox.open(map, buildingMarkers);
});
google.maps.event.addListener(infobox, 'domready', function () {
var iwOuter = $('.gm-style-iw');
iwOuter.css({ 'left': '0', 'width': '100%' });
var iwBackground = iwOuter.prev();
iwBackground.parent().css({'width': '330px'});
iwBackground.children(':nth-child(2)').css({
'background-color': 'transparent', 'box-shadow': 'none'
});
iwBackground.children(':nth-child(4)').css({
'background-color': 'transparent'
});
var iwX = iwOuter.next();
iwX.css({'right': '0', 'top': '15px'});
iwX.children().remove();
iwX.css({ 'width': '28px', 'height': '28px' }).append('<span style="color: #b22c2c; font-size: 22px;"><i class="rimo rimo-close">X</span>');
iwBackground.children(':nth-child(3)').children(':first-child').children(':first-child').css({'background-color': '#fff', 'z-index': '1000', 'display': 'none', 'box-shadow': 'none'});
iwBackground.children(':nth-child(3)').children(':last-child').children(':first-child').css({'background-color': '#fff', 'z-index': '1000', 'display': 'none', 'box-shadow': 'none'});
});
}
</script>
推荐阅读
- swift - CoreBluetooth peripheralManager 广告在后台停止
- python - 在字符串中显示随机选择的单词 - Python
- html - bootstrap 4和laravel中的垂直居中问题
- html - 使用 Angular 在下拉列表中选择的设置
- java - Spring 不实例化具有 Map 或 List 作为属性的 bean
- node.js - 导入模块的 NestJS 依赖注入失败
- python - 在函数体中接收 **kwargs 和解包参数而不是简单参数 - 为什么?
- javascript - javascript中startsWith()的相反方法
- typescript - 打字稿说 pa 可以在 if (pa !== undefined) 的正文中未定义
- android - 在模块中找到的 Android 重复类 com.google.android.gms.location.places.zza