вставить кластер маркеров карт Google - PullRequest
Новая
       34

вставить кластер маркеров карт Google

0 голосов
/ 27 февраля 2019

Я пытаюсь реализовать кластер с несколькими метками на моей карте, но я не имею представления об этом языке.Это код, который у меня есть, и он отлично работает: 

   /*  Google Maps
---------------------------------------------------*/

    var map;
    var InforObj = [];
    var centerCords = {
        lat: 51.14431,
        lng: 4.34605
    };
    var markersOnMap = [
        {
            placeName: "<p>content</p>",
            LatLng: [{
                lat: 51.21851,
                lng: 4.40678
            }]
        },
        {
            placeName: "<p>content</p>",
            LatLng: [{
                lat: 51.20843,
                lng: 3.22377
            }]
        },
        {
            placeName: "<p>content</p>",
            LatLng: [{
                lat: 50.92935,
                lng: 5.33815
            }]
        },
        {
            placeName: "<p>content</p>",
            LatLng: [{
                lat: 51.08416,
                lng: 3.44807
            }]
        },
        {
            placeName: "<p>content</p>",
            LatLng: [{
                lat: 50.87792,
                lng: 4.69971
            }]
        },
        {
            placeName: "<p>content</p>",
            LatLng: [{
                lat: 51.20585,
                lng: 4.42898
            }]
        }
    ];
    window.onload = function () {
        initMap();
    };
    function addMarkerInfo() {
        for (var i = 0; i < markersOnMap.length; i++) {
            var contentString = '<div id="content" style="text-align:left;padding:20px;font-size:16px;font-family:Poppins;">' + markersOnMap[i].placeName + '</div>';
            const marker = new google.maps.Marker({
                icon: 'https://www.website.be/assets/img/map-marker.png',
                position: markersOnMap[i].LatLng[0],
                map: map
            });
            const infowindow = new google.maps.InfoWindow({
                content: contentString,
                width: 400,
                height: 400
            });
            marker.addListener('click', function () {
                closeOtherInfo();
                infowindow.open(marker.get('map'), marker);
                InforObj[0] = infowindow;
            });
        }
    }
    function closeOtherInfo() {
        if (InforObj.length > 0) {
            InforObj[0].set("marker", null);
            InforObj[0].close();
            InforObj.length = 0;
        }
    }
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 9,
            center: centerCords,
            styles: stylesArray,
            mapTypeId: 'terrain',
            disableDefaultUI: true,
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            },
         });
        addMarkerInfo();
    }


var stylesArray = [
{
"elementType": "geometry",
"stylers": [
  {
    "color": "#f5f5f5"
  }
]
},
{
"elementType": "labels.icon",
"stylers": [
  {
    "visibility": "off"
  }
]
},
{
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#616161"
  }
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
  {
    "color": "#f5f5f5"
  }
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
  {
    "visibility": "off"
  }
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#bdbdbd"
  }
]
},
{
"featureType": "poi",
"stylers": [
  {
    "visibility": "off"
  }
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
  {
    "color": "#eeeeee"
  }
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#757575"
  }
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
  {
    "color": "#e5e5e5"
  }
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#9e9e9e"
  }
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
  {
    "color": "#ffffff"
  }
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
  {
    "visibility": "off"
  }
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#757575"
  }
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
  {
    "color": "#dadada"
  }
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#616161"
  }
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#9e9e9e"
  }
]
},
{
"featureType": "transit",
"stylers": [
  {
    "visibility": "off"
  }
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
  {
    "color": "#e5e5e5"
  }
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
  {
    "color": "#eeeeee"
  }
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
  {
    "color": "#c9c9c9"
  }
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#9e9e9e"
  }
]
}
];

Но теперь я хотел бы добавить код кластеризации, и я не знаю, как это сделать, поскольку у меня нет знаний по JavaScript. 

var markerCluster = new MarkerClusterer(map,markers,{imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

Может ли кто-нибудь помочь мне совмещать эти два кода?Спасибо.

1 Ответ

0 голосов
/ 27 февраля 2019

Вам нужно добавить маркеры в массив и передать их в конструктор кластерных маркеров.Следующие строки должны быть добавлены в ваш код.

var markersArray = new Array();

и 

markersArray.push(marker);

и 

var markerCluster = new MarkerClusterer(map, markersArray, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

Полный код приведен ниже.Я добавил комментарии в CAPS с префиксом "J -" 

/*  Google Maps
---------------------------------------------------*/

var map;
// J - CREATE AN EMPTY MARKER ARRAY
var markersArray = new Array();    
var InforObj = [];
var centerCords = {
    lat: 51.14431,
    lng: 4.34605
};
var markersOnMap = [
    {
        placeName: "<p>content</p>",
        LatLng: [{
            lat: 51.21851,
            lng: 4.40678
        }]
    },
    {
        placeName: "<p>content</p>",
        LatLng: [{
            lat: 51.20843,
            lng: 3.22377
        }]
    },
    {
        placeName: "<p>content</p>",
        LatLng: [{
            lat: 50.92935,
            lng: 5.33815
        }]
    },
    {
        placeName: "<p>content</p>",
        LatLng: [{
            lat: 51.08416,
            lng: 3.44807
        }]
    },
    {
        placeName: "<p>content</p>",
        LatLng: [{
            lat: 50.87792,
            lng: 4.69971
        }]
    },
    {
        placeName: "<p>content</p>",
        LatLng: [{
            lat: 51.20585,
            lng: 4.42898
        }]
    }
];
window.onload = function () {
    initMap();
};
function addMarkerInfo() {
    for (var i = 0; i < markersOnMap.length; i++) {
        var contentString = '<div id="content" style="text-align:left;padding:20px;font-size:16px;font-family:Poppins;">' + markersOnMap[i].placeName + '</div>';
        const marker = new google.maps.Marker({
            icon: 'https://www.website.be/assets/img/map-marker.png',
            position: markersOnMap[i].LatLng[0],
            map: map
        });
        const infowindow = new google.maps.InfoWindow({
            content: contentString,
            width: 400,
            height: 400
        });
        marker.addListener('click', function () {
            closeOtherInfo();
            infowindow.open(marker.get('map'), marker);
            InforObj[0] = infowindow;
        });

        // J - ADD MARKER TO THE ARRAY. 
        markersArray.push(marker);
    }
}
function closeOtherInfo() {
    if (InforObj.length > 0) {
        InforObj[0].set("marker", null);
        InforObj[0].close();
        InforObj.length = 0;
    }
}
function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 9,
        center: centerCords,
        styles: stylesArray,
        mapTypeId: 'terrain',
        disableDefaultUI: true,
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.LEFT_CENTER
        },
     });
    addMarkerInfo();

    // 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'});

}


var stylesArray = [
{
"elementType": "geometry",
"stylers": [
  {
    "color": "#f5f5f5"
  }
]
},
{
"elementType": "labels.icon",
"stylers": [
  {
    "visibility": "off"
  }
]
},
{
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#616161"
  }
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
  {
    "color": "#f5f5f5"
  }
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
  {
    "visibility": "off"
  }
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#bdbdbd"
  }
]
},
{
"featureType": "poi",
"stylers": [
  {
    "visibility": "off"
  }
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
  {
    "color": "#eeeeee"
  }
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#757575"
  }
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
  {
    "color": "#e5e5e5"
  }
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#9e9e9e"
  }
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
  {
    "color": "#ffffff"
  }
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
  {
    "visibility": "off"
  }
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#757575"
  }
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
  {
    "color": "#dadada"
  }
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#616161"
  }
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#9e9e9e"
  }
]
},
{
"featureType": "transit",
"stylers": [
  {
    "visibility": "off"
  }
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
  {
    "color": "#e5e5e5"
  }
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
  {
    "color": "#eeeeee"
  }
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
  {
    "color": "#c9c9c9"
  }
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
  {
    "color": "#9e9e9e"
  }
]
}
];
...