Google Maps JS API v3 - пример использования нескольких маркеров - PullRequest
Новая
       85

Google Maps JS API v3 - пример использования нескольких маркеров

622 голосов
/ 17 июня 2010

Довольно новый для API Google Maps.У меня есть массив данных, которые я хочу просмотреть и нанести на карту.Кажется довольно простым, но все мультимаркерные учебники, которые я нашел, довольно сложные.

Давайте использовать массив данных с сайта Google для примера: 

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

Я просто хочу построить графиквсе эти точки и всплывающее информационное окно при нажатии для отображения имени.

Ответы [ 12 ]

3 голосов
/ 19 февраля 2019

Источник Ссылка

Демо Ссылка

Полный HTML-код

  • Показать информационное окно при нажатии или наведении курсора.
  • Будет отображаться только одно информационное окно

enter image description here

    <!DOCTYPE html>
    <html>

    <head>
        <style>
            /*  <span class="metadata-marker" style="display: none;" data-region_tag="css"></span>       Set the size of the div element that contains the map */
            #map {
                height: 400px;
                /* The height is 400 pixels */
                width: 100%;
                /* The width is the width of the web page */
            }
        </style>
        <script>
            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

            window.onload = function () {
                initMap();
            };

            function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    /* detach the info-window from the marker ... undocumented in the API docs */
                    InforObj[0].set("marker", null);
                    /* and close it */
                    InforObj[0].close();
                    /* blank the array */
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
        </script>
    </head>

    <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>

        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

    </body>

    </html>
2 голосов
/ 04 сентября 2016

Вот почти полный пример функции javascript, которая позволяет использовать несколько маркеров, определенных в JSONObject.

В нем будут отображаться только те маркеры, которые находятся в границах карты.

Это важно, чтобы вы не выполняли дополнительную работу.

Вы также можете установить ограничение на маркеры, чтобы не показывать слишком много маркеров (если есть вероятность, что вы используете что-то);

также не будет отображатьсямаркеры, если центр карты не изменился более чем на 500 м.
Это важно, потому что, если пользователь нажимает на маркер и случайно перетаскивает карту, вы не хотите, чтобы карта перезагружала маркеры.

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

В снимке экрана действия естьнебольшое изменение в снимке экрана, показывающее больше контента в информационном окне.enter image description here вставлено с сайта pastbin.com 

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...