Карты Google - кластеризация маркеров с помощью нажимаемых маркеров

Question

Карты Google - кластеризация маркеров с помощью нажимаемых маркеров

1

Я немного запутался в работе с картами Google. Я не новичок в кодировании, но javascript не лучшая практика.

Я использую кластер маркеров Google Maps, чтобы отметить какую-то позицию. Я получаю координаты из своей базы данных. Но я хочу показать (clickable) описание (подсказки). Я не понимаю, как реализовать это в своем коде.

Мой код выглядит так:

function initMap(position) {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: {lat: 51.1427552, lng: 8.2123375}
            });
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    map.setCenter(pos);
                }, function () {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } 
            // Create an array of alphabetical characters used to label the markers.
            var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

            // Add some markers to the map.
            // Note: The code uses the JavaScript Array.prototype.map() method to
            // create an array of markers based on a given "locations" array.
            // The map() method here has nothing to do with the Google Maps API.
            var markers = locations.map(function (location, i) {
                console.log(location[2]);
                return new google.maps.Marker({
                    position: location,
                    label: labels[i % labels.length], 
                });

            }); 

            console.log(markers);

            // Add a marker clusterer to manage the markers.
            var markerCluster = new MarkerClusterer(map, markers,
                    {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
        }
        var locations = [{"lat":52.2885818,"lng":7.4184098,"title":"test"},{"lat":52.2756548,"lng":7.4223696,"title":"test"}]

Надеюсь, вы можете показать мне, как я могу интегрировать эти всплывающие подсказки.

Я нашел такой код:

google.maps.event.addListener(markers,'click',function() {
var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});

infowindow.open (карта, маркеры); });

Но я не уверен, как реализовать. Помощь была бы ужасной. Большое спасибо!

yfain 13 июнь 2017, в 00:04

Источник

Теги:

javascript

google-maps

google-maps-api-3

2 ответа

0

У меня та же проблема, однако я работаю с маркерами в одном и том же месте и хочу сгруппировать их подальше от этого местоположения, чтобы пользователь мог видеть все маркеры для одного местоположения. Я попытался исправить выше, однако, это не работает, если места одинаковы

Nick Coleby 06 июнь 2019, в 10:58

Ещё вопросы

Mohan Singh · Accepted Answer · 2017-06-13T14-52-00.000Z

Здравствуйте, yfain попробуйте этот код !.

<script>
var AllMarkers = [];
google.maps.event.addDomListener(window, 'load', initMap);
function initMap(position) {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: {lat: 51.1427552, lng: 8.2123375}
        });
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                map.setCenter(pos);
            }, function () {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } 
        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.

        //var markers = locations.map(function (location, i) {
        //   // console.log(location[2]);
        //    return new google.maps.Marker({
        //        position: location,
        //        icon:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
        //        label: labels[i % labels.length], 
        //    });

        //}); 
        $.each(locations, function (i, location) {
            debugger;
                console.log(location.lat+', '+location.lng);
var points = {
                lat: location.lat,
                lng: location.lng
            };
            map.setCenter(points);
            var myLatlng = new google.maps.LatLng(location.lat, location.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
               map: map,
                title: labels,
                icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png'
            });
            AllMarkers.push(marker)
            marker.info = new google.maps.InfoWindow({
                content: location.title
               // content: labels[i % labels.length]
        });
        google.maps.event.addListener(marker, 'click', function (e) {
         marker.info.open(map, marker);
     });
        });

        //console.log(markers);

        // Add a marker clusterer to manage the markers.
    //    var markerCluster = new MarkerClusterer(map, markers,
    //            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
    }
var locations = [{ "lat": 30.740762, "lng": 76.783013, "title": "Loc-1" }, { "lat": 30.733532, "lng": 76.77134, "title": "Loc-2" }]

</script>