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

657

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

Давайте использовать массив данных с сайта 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]
];

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

javascript google-maps google-maps-api-3 wesbos
источник

Ответы:

1128

Это самое простое, что я мог бы уменьшить до:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    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]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

👨‍💻 Редактировать / разветвляться на Codepen →

СКРИНШОТ

Google Maps несколько маркеров

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

❯ Mozilla Dev Center: Работа с Closures

Даниэль Вассалло
источник
4
@RaphaelDDL: Да, эти скобки нужны для фактического вызова безымянной функции. Аргументы должны быть переданы из-за способа работы JavaScript (из-за замыканий). Смотрите мой ответ на этот вопрос для примера и дополнительной информации: stackoverflow.com/a/2670420/222908
Даниэль Вассалло
Хороший ответ, но он может быть упрощен в дальнейшем. Поскольку все маркеры будут иметь отдельные InfoWindows и JavaScript не заботится о добавлении дополнительных свойств к объекту, все, что вам нужно сделать, это добавить InfoWindowсвойства Marker и затем вызвать из .open()него InfoWindow. Я бы опубликовал изменения здесь, но они были достаточно большими, и я отправил свой ответ .
Мэтью Кордаро
Почему бы не использовать new MarkerClusterer()для массивного бюста производительности? Проверьте ответ ChirsSwires.
DevWL
привет @ Даниэль Вассалло, у меня тоже есть потребность в отображении нескольких маркеров в моем ионном угловом проекте. Пожалуйста, помогите мне, я уже задавал вопрос по stackoverflow. вот ссылка на вопрос: stackoverflow.com/questions/57985967/…
Saif
Оно работает. Спасибо. Как вы будете удалять маркеры с карты Google, потому что вы используете один экземпляр маркера и инициализировать в цикле. Пожалуйста, поделитесь своими мыслями.
Kamlesh
59

Вот еще один пример из множества маркеров погрузки с уникальным titleи infoWindowтекстом. Протестировано с последним API карт Google V3.11.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Multiple Markers Google Maps</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
        // check DOM Ready
        $(document).ready(function() {
            // execute
            (function() {
                // map options
                var options = {
                    zoom: 5,
                    center: new google.maps.LatLng(39.909736, -98.522109), // centered US
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    mapTypeControl: false
                };

                // init map
                var map = new google.maps.Map(document.getElementById('map_canvas'), options);

                // NY and CA sample Lat / Lng
                var southWest = new google.maps.LatLng(40.744656, -74.005966);
                var northEast = new google.maps.LatLng(34.052234, -118.243685);
                var lngSpan = northEast.lng() - southWest.lng();
                var latSpan = northEast.lat() - southWest.lat();

                // set multiple marker
                for (var i = 0; i < 250; i++) {
                    // init markers
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
                        map: map,
                        title: 'Click Me ' + i
                    });

                    // process multiple info windows
                    (function(marker, i) {
                        // add click event
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow = new google.maps.InfoWindow({
                                content: 'Hello, World!!'
                            });
                            infowindow.open(map, marker);
                        });
                    })(marker, i);
                }
            })();
        });
        </script>
    </head>
    <body>
        <div id="map_canvas" style="width: 800px; height:500px;"></div>
    </body>
</html>

Скриншот 250 маркеров:

Google Maps API V3.11 с несколькими маркерами

Он автоматически рандомизирует Lat / Lng, чтобы сделать его уникальным. Этот пример будет очень полезен, если вы хотите протестировать маркеры 500, 1000, xxx и производительность.

Мадан Сапкота
источник
1
Будьте осторожны при публикации копируй и вставляй шаблонные / дословные ответы на несколько вопросов, они, как правило, помечаются сообществом как «спам». Если вы делаете это, то это обычно означает, что вопросы являются дубликатами, поэтому пометьте их как таковые.
Кев
1
Появится много всплывающих окон infoWindowдля каждого маркера и не будет скрываться другой, infoWindowесли он отображается в данный момент. это действительно полезно :)
Kannika
@Anup, если вы просто прочитаете вопрос и прокомментируете, было бы лучше. вопрос задает «пример для нескольких маркеров», будь то случайный или ваш собственный бла бла.
Мадан Сапкота
Опять же, почему бы не использовать new MarkerClusterer()для массового исполнения бюста? Проверьте ответ ChirsSwires.
DevWL
1
@DevWL, ответ был дан еще в 2013 году. Вы можете свободно обновлять.
Мадан Сапкота
39

Я подумал, что поместу это здесь, так как оно кажется популярной точкой посадки для тех, кто начинает использовать API Карт Google. Многочисленные маркеры, отображаемые на стороне клиента, вероятно, снижают производительность многих картографических приложений. Трудно провести сравнительный анализ, исправить, а в некоторых случаях даже установить, что существует проблема (из-за различий в реализации браузера, аппаратного обеспечения, доступного клиенту, мобильных устройств, этот список можно продолжить).

Самый простой способ начать решение этой проблемы - использовать решение для кластеризации маркеров. Основная идея состоит в том, чтобы сгруппировать географически похожие местоположения в группу с количеством отображаемых точек. Когда пользователь увеличивает масштаб карты, эти группы расширяются, показывая отдельные маркеры внизу.

Возможно, самый простой для реализации это библиотека markerclusterer . Базовая реализация будет выглядеть следующим образом (после импорта библиотеки):

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

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

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

Другие реализации доступны от Google.

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

ChrisSwires
источник
2
Спасибо, большая помощь! Существует разница в производительности на порядок или величину: сначала нужно создать точки данных google.map, а затем передать их в библиотеку сопоставлений, в данном случае MarketCluster для построения графика. Приблизительно с 150000 точками данных первая запись 'Daniel Vassallo' заняла около 2 минут для загрузки, это 5 секунд. Спасибо кучу "Swires"!
Вакас
1
Я подумал, что это было бы хорошим местом для этого, я бы вообразил, что большинство людей сначала приземляется в стеке, когда эта страница связана с картами Google, а во-вторых, «почему моя карта загружается так долго».
ChrisSwires
@Monic, какой бы ни был ваш набор данных, это просто переменная-заполнитель.
ChrisSwires
20

Асинхронная версия:

<script type="text/javascript">
  function initialize() {
    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]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;
  </script>
sHaDeoNeR
источник
15

Это рабочий пример изображения карты 

var arr = new Array();
    function initialize() { 
        var i;  
        var Locations = [
                {
                  lat:48.856614, 
                  lon:2.3522219000000177, 
                  address:'Paris',
                  gval:'25.5',
                  aType:'Non-Commodity',
                  title:'Paris',
                  descr:'Paris'           
                },        
                    {
                  lat: 55.7512419, 
                  lon: 37.6184217,
                  address:'Moscow',
                  gval:'11.5',
                  aType:'Non-Commodity',
                  title:'Moscow',
                  descr:'Moscow Airport'              
                },     

                {
              lat:-9.481553000000002, 
              lon:147.190242, 
              address:'Port Moresby',
              gval:'1',
              aType:'Oil',
              title:'Papua New Guinea',
              descr:'Papua New Guinea 123123123'              
            },
            {
           lat:20.5200,
           lon:77.7500,
           address:'Indore',
            gval:'1',
            aType:'Oil',
            title:'Indore, India',
            descr:'Airport India'
        }
    ];

    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(51.9000,8.4731),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });

    for (i = 0; i < Locations.length; i++) {
            size=15;        
            var img=new google.maps.MarkerImage('marker.png',           
                new google.maps.Size(size, size),
                new google.maps.Point(0,0),
                new google.maps.Point(size/2, size/2)
           );

        var marker = new google.maps.Marker({
            map: map,
            title: Locations[i].title,
            position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),           
                icon: img
        });

        bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);  

    }

}

function bindInfoWindow(marker, map, infowindow, html, Ltitle) { 
    google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.setContent(html); 
            infowindow.open(map, marker); 

    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();

    }); 
}

Полный рабочий пример. Вы можете просто скопировать, вставить и использовать.

Anup
источник
12

Из примеров Google Map API :

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['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]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

источник
8
в этот ответ не входит часть
infoWindow
@omat Странно, но собственные документы Google не предполагают, что должна быть часть информационного окна. Но, тем не менее, это не работает и для меня :(
Эмиль Альбек
11

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

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

В этих информационных окнах никогда не упоминается, что стандартное информационное окно НЕ размещается на точки маркера, а скорее в верхней части изображения маркера. Чтобы это работало, видимость маркера должна быть скрыта, в противном случае API-интерфейс Карт снова вернет привязку информационного окна к вершине изображения маркера.

Ссылка на маркеры в массиве «маркеры» создаются сразу после объявления маркера для любых дополнительных задач обработки, которые могут потребоваться позже (скрытие / отображение, захват координат и т. Д.). Это экономит дополнительный шаг назначения объекта маркера на «маркер», а затем помещает «маркер» в массив маркеров ... много ненужной обработки в моей книге.

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

    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]
    ];
    var map;
    var markers = [];

    function init(){
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var num_markers = locations.length;
      for (var i = 0; i < num_markers; i++) {  
        markers[i] = new google.maps.Marker({
          position: {lat:locations[i][1], lng:locations[i][2]},
          map: map,
          html: locations[i][0],
          id: i,
        });

        google.maps.event.addListener(markers[i], 'click', function(){
          var infowindow = new google.maps.InfoWindow({
            id: this.id,
            content:this.html,
            position:this.getPosition()
          });
          google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
            markers[this.id].setVisible(true);
          });
          this.setVisible(false);
          infowindow.open(map);
        });
      }
    }

google.maps.event.addDomListener(window, 'load', init);

Вот рабочий JSFiddle

Дополнительное примечание В
приведенных данных примера Google вы заметите четвертое место в массиве 'местоположений' с номером. Учитывая это в примере, вы также можете использовать это значение для идентификатора маркера вместо текущего значения цикла, так что ...

var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {  
  markers[i] = new google.maps.Marker({
    position: {lat:locations[i][1], lng:locations[i][2]},
    map: map,
    html: locations[i][0],
    id: locations[i][3],
  });
};
Богоявление
источник
10

Принят ответ, переписан в ES6:

$(document).ready(() => {
  const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');

  // Display a map on the page
  const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });

  const buildings = [
    {
      title: 'London Eye, London', 
      coordinates: [51.503454, -0.119562],
      info: 'carousel'
    },
    {
      title: 'Palace of Westminster, London', 
      coordinates: [51.499633, -0.124755],
      info: 'palace'
    }
  ];

  placeBuildingsOnMap(buildings, map);
});


const placeBuildingsOnMap = (buildings, map) => {
  // Loop through our array of buildings & place each one on the map  
  const bounds = new google.maps.LatLngBounds();
  buildings.forEach((building) => {
    const position = { lat: building.coordinates[0], lng: building.coordinates[1] }
    // Stretch our bounds to the newly found marker position
    bounds.extend(position);

    const marker = new google.maps.Marker({
      position: position,
      map: map,
      title: building.title
    });

    const infoWindow = new google.maps.InfoWindow();
    // Allow each marker to have an info window
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.setContent(building.info);
      infoWindow.open(map, marker);
    })

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  })
})
lakesare
источник
6

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

Демо- ссылка

Полный код HTML

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

введите описание изображения здесь

    <!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>
Код Шпион
источник
1
Спасибо за то closeOtherInfo, что я не смог найти достойного решения для работы с merkercluster до тех пор, пока вы не ответите. :)
Крис Лафнейн
1
Теперь это то, что я искал. Спасибо, человек отлично работает в 2020 году
Файзан Анвер Али Рупани
5

Добавить маркер в вашу программу очень просто. Вы просто можете добавить этот код:

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'Hello World!'
});

Следующие поля особенно важны и обычно устанавливаются при создании маркера:

  • position(обязательно) указывает LatLng, идентифицирующий начальное местоположение маркера. Одним из способов получения LatLng является использование сервиса геокодирования .
  • map(необязательно) указывает карту для размещения маркера. Если вы не укажете карту для построения маркера, он будет создан, но не прикреплен (или не показан на карте). Вы можете добавить маркер позже, вызвав метод маркера setMap().

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

Вы можете ознакомиться с документацией по API Google здесь .

Это полный пример установки одного маркера на карте. Будьте внимательны, вы должны заменить YOUR_API_KEYсвой ключ API Google :

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <title>Simple markers</title>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
 <div id="map"></div>
<script>

  function initMap() {
    var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Теперь, если вы хотите построить маркеры массива на карте, вы должны сделать это так:

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]
];

function initMap() {
  var myLatLng = {lat: -33.90, lng: 151.16};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: myLatLng
    });

  var count;

  for (count = 0; count < locations.length; count++) {  
    new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
      });
   }
}

Этот пример дает мне следующий результат:

введите описание изображения здесь

Вы также можете добавить информационное окно в свой пин-код. Вам просто нужен этот код:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[count][1], locations[count][2]),
    map: map
    });

marker.info = new google.maps.InfoWindow({
    content: 'Hello World!'
    });

Вы можете получить документацию Google об infoWindows здесь .

Теперь мы можем открыть окно infoWindow, когда маркер «клик», вот так:

var marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[count][1], locations[count][2]),
     map: map
     });

marker.info = new google.maps.InfoWindow({
     content: locations [count][0]
     });


google.maps.event.addListener(marker, 'click', function() {  
    // this = marker
    var marker_map = this.getMap();
    this.info.open(marker_map, this);
    // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
            });

Обратите внимание , вы можете иметь некоторую документацию Listener здесь в Google Developer.

И, наконец, мы можем построить информационное окно в маркере, если пользователь щелкнет по нему. Это мой полный код:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
    /* Always set the map height explicitly to define the size of the div
    * element that contains the map. */
    #map {
        height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>

    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]
    ];


    // When the user clicks the marker, an info window opens.

    function initMap() {
        var myLatLng = {lat: -33.90, lng: 151.16};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: myLatLng
            });

        var count=0;


        for (count = 0; count < locations.length; count++) {  

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                map: map
                });

            marker.info = new google.maps.InfoWindow({
                content: locations [count][0]
                });


            google.maps.event.addListener(marker, 'click', function() {  
                // this = marker
                var marker_map = this.getMap();
                this.info.open(marker_map, this);
                // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
                });
        }
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>
</html>

Обычно у вас должен быть такой результат:

Ваш результат

SphynxTech
источник
4

Исходя из ответа Даниэля Вассалло , вот версия, которая упрощает решение проблемы закрытия.

Так , так как все маркеры будут иметь индивидуальный InfoWindow и поскольку JavaScript не волнуют , если вы добавляете дополнительные свойства объекта, все , что вам нужно сделать , это добавить InfoWindow к маркерным свойствам , а затем вызвать .open()на InfoWindow от себя!

Изменить: При наличии достаточного количества данных загрузка страницы может занять много времени, поэтому вместо создания информационного окна с маркером создание должно выполняться только при необходимости. Обратите внимание , что какие - либо данные , используемые для построения InfoWindow должна быть добавлена к маркеру как свойство ( data). Также обратите внимание, что после первого клика событие infoWindowбудет сохраняться как свойство маркера, поэтому браузеру не нужно постоянно восстанавливать.

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]
];

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(-33.92, 151.25)
});

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    data: {
      name: locations[i][0]
    }
  });
  marker.addListener('click', function() {
    if(!this.infoWindow) {
      this.infoWindow = new google.maps.InfoWindow({
        content: this.data.name;
      });
    }
    this.infoWindow.open(map,this);
  })
}
Мэтью Кордаро
источник
2

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

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

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

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

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

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

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

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>
Развернуть фрагмент

Thunderstick
источник
0

Вот пример нескольких маркеров в Reactjs .

введите описание изображения здесь

Ниже находится компонент карты

import React from 'react';
import PropTypes from 'prop-types';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';

const MapContainer = (props) => {
  const [mapConfigurations, setMapConfigurations] = useState({
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {}
  });

  var points = [
    { lat: 42.02, lng: -77.01 },
    { lat: 42.03, lng: -77.02 },
    { lat: 41.03, lng: -77.04 },
    { lat: 42.05, lng: -77.02 }
  ]
  const onMarkerClick = (newProps, marker) => {};

  if (!props.google) {
    return <div>Loading...</div>;
  }

  return (
    <div className="custom-map-container">
      <Map
        style={{
          minWidth: '200px',
          minHeight: '140px',
          width: '100%',
          height: '100%',
          position: 'relative'
        }}
        initialCenter={{
          lat: 42.39,
          lng: -72.52
        }}
        google={props.google}
        zoom={16}
      >
        {points.map(coordinates => (
          <Marker
            position={{ lat: coordinates.lat, lng: coordinates.lng }}
            onClick={onMarkerClick}
            icon={{
              url: 'https://res.cloudinary.com/mybukka/image/upload/c_scale,r_50,w_30,h_30/v1580550858/yaiwq492u1lwuy2lb9ua.png',
            anchor: new google.maps.Point(32, 32), // eslint-disable-line
            scaledSize: new google.maps.Size(30, 30)  // eslint-disable-line
            }}
            name={name}
          />))}
        <InfoWindow
          marker={mapConfigurations.activeMarker}
          visible={mapConfigurations.showingInfoWindow}
        >
          <div>
            <h1>{mapConfigurations.selectedPlace.name}</h1>
          </div>
        </InfoWindow>
      </Map>
    </div>
  );
};

export default GoogleApiWrapper({
  apiKey: process.env.GOOGLE_API_KEY,
  v: '3'
})(MapContainer);

MapContainer.propTypes = {
  google: PropTypes.shape({}).isRequired,
};
akolliy
источник