657

Dość nowy w Google Maps Api. Mam szereg danych, które chcę przeglądać i drukować na mapie. Wydaje się to dość proste, ale wszystkie samouczki dotyczące wielu markerów, które znalazłem, są dość złożone.

Użyjmy na przykład tablicy danych z witryny 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]
];

Chcę po prostu wykreślić wszystkie te punkty i wyświetlić okno informacji po kliknięciu, aby wyświetlić nazwę.

javascript google-maps google-maps-api-3 wesbos
źródło

1128

Jest to najprostszy sposób, w jaki mogę to sprowadzić do:

<!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>

👨‍💻 Edytuj / rozwidlaj na Codepen →

ZRZUT EKRANU

Wiele map w Mapach Google

Podczas przekazywania argumentu wywołania zwrotnego do addListenermetody zachodzi pewna magia zamknięcia . Może to być dość trudny temat, jeśli nie wiesz, jak działają zamknięcia. Jeśli tak jest, sugeruję przejrzenie następującego artykułu Mozilli, aby uzyskać krótkie wprowadzenie:

Dev Centrum deweloperów Mozilla: Praca z zamknięciami

Daniel Vassallo
źródło

4

@RaphaelDDL: Tak, te nawiasy są potrzebne do wywołania funkcji bezimiennej. Argumenty należy przekazać ze względu na sposób działania JavaScript (z powodu zamknięć). Zobacz moją odpowiedź na to pytanie, aby uzyskać przykład i więcej informacji: stackoverflow.com/a/2670420/222908

Daniel Vassallo

Dobra odpowiedź, ale można ją jeszcze uprościć. Ponieważ ponieważ wszystkie znaczniki będą miały indywidualne InfoWindows, a ponieważ JavaScript nie dba o to, czy dodasz dodatkowe właściwości do obiektu, wszystko, co musisz zrobić, to dodać InfoWindowdo właściwości Markera, a następnie wywołać .open()sam InfoWindow. Chciałbym zamieścić tutaj zmiany, ale modyfikacje były na tyle duże, że opublikowałem własną odpowiedź .

Matthew Cordaro,

Dlaczego nie użyć new MarkerClusterer()do masowego spadku wydajności? Sprawdź odpowiedź ChirsSwires.

DevWL

cześć @ Daniel Vassallo, ja również mam taki sam wymóg wyświetlania wielu markerów w moim jonowym projekcie kątowym. proszę o pomoc, już zadałem pytanie na temat stackoverflow. oto link do pytania: stackoverflow.com/questions/57985967/…

Saif

To działa. Dzięki. Jak usuniesz znaczniki z mapy Google, ponieważ używasz pojedynczego wystąpienia znacznika i inicjujesz w pętli. Podziel się swoimi przemyśleniami.

Kamlesh,

59

Oto kolejny przykład ładowania wielu markerów unikatowym titlei infoWindowtekstowym. Testowane z najnowszym API Google Maps 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>

Zrzut ekranu z 250 markerów:

Google Maps API V3.11 z wieloma markerami

Automatycznie randomizuje Lat / Lng, aby był wyjątkowy. Ten przykład będzie bardzo pomocny, jeśli chcesz przetestować markery i wydajność 500, 1000, xxx.

Madan Sapkota
źródło

1

Zachowaj ostrożność, publikując odpowiedzi na wiele pytań, kopiując i wklejając odpowiedzi na wiele pytań, które zazwyczaj są oznaczane przez społeczność jako „spam”. Jeśli to robisz, oznacza to zwykle, że pytania są duplikatami, więc oznacz je jako takie.

Kev

1

Spowoduje to wyświetlenie wielu wyskakujących okien infoWindowdla każdego znacznika i nie ukryje drugiego, infoWindowjeśli jest aktualnie wyświetlany. to naprawdę pomocne :)

Kannika

@Anup, jeśli po prostu przeczytasz pytanie i skomentujesz, byłoby lepiej. pytanie brzmi „przykład dla wielu znaczników”, czy jest to losowy czy własny bla bla.

Madan Sapkota

Znowu czemu nie użyć new MarkerClusterer()do masowego popiersia wydajności? Sprawdź odpowiedź ChirsSwires.

DevWL

1

@DevWL, odpowiedź została udzielona w 2013 roku. Aktualizacja jest bezpłatna.

Madan Sapkota,

39

Pomyślałem, że umieszczę to tutaj, ponieważ wydaje się, że jest popularnym miejscem lądowania dla tych, którzy zaczynają korzystać z API Google Maps. Wiele znaczników renderowanych po stronie klienta jest prawdopodobnie wadą wielu aplikacji mapujących pod względem wydajności. Trudno jest przeprowadzić analizę porównawczą, naprawić, aw niektórych przypadkach nawet ustalić, że występuje problem (z powodu różnic w implementacji przeglądarki, sprzętu dostępnego dla klienta, urządzeń mobilnych, lista jest długa).

Najprostszym sposobem na rozwiązanie tego problemu jest użycie rozwiązania klastrowania markerów. Podstawową ideą jest grupowanie geograficznie podobnych lokalizacji w grupę z liczbą wyświetlanych punktów. Gdy użytkownik przybliża mapę, grupy te rozszerzają się, odsłaniając poszczególne markery poniżej.

Być może najłatwiejszym do zaimplementowania jest biblioteka markerclusterer . Podstawowa implementacja wyglądałaby następująco (po zaimportowaniu biblioteki):

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

Znaczniki zamiast dodawać bezpośrednio do mapy, są dodawane do tablicy. Ta tablica jest następnie przekazywana do biblioteki, która obsługuje skomplikowane obliczenia, i dołączana do mapy.

Wdrożenia te nie tylko znacznie zwiększają wydajność po stronie klienta, ale także w wielu przypadkach prowadzą do prostszego i mniej zaśmieconego interfejsu użytkownika oraz łatwiejszego trawienia danych na większą skalę.

Inne implementacje są dostępne od Google.

Mam nadzieję, że to pomoże niektórym z nich poznać niuanse mapowania.

ChrisSwires
źródło

2

Dzięki, wielka duża pomoc! Występuje różnica w wydajności lub porządku, najpierw stawiając punkty danych google.map, a następnie przekazując je do biblioteki mapowania, w tym przypadku MarketCluster do wykreślenia. z około 150 000 punktów danych załadowanie pierwszego postu przez „Daniela Vassallo” zajęło około 2 minut, w tym 5 sekund. Wielkie dzięki „Swires”!

Waqas,

1

Pomyślałem, że to będzie dobre miejsce, wyobrażam sobie, że większość ludzi ląduje na stosie, gdy jest powiązana z mapami Google na tej stronie, a po drugie „dlaczego tak długo trwa ładowanie mojej mapy”.

ChrisSwires

@Monic To jest dowolny zestaw danych, to tylko zmienna zastępcza.

ChrisSwires,

20

Wersja asynchroniczna:

<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
źródło

15

To jest działający przykładowy obraz mapy

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();

    }); 
}

Pełny przykład roboczy. Możesz po prostu skopiować, wkleić i użyć.

Anup
źródło

12

Z próbek interfejsu API Google Map :

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

źródło

8

ta odpowiedź nie obejmuje części

infoWindow

@omat Co dziwne, własne dokumenty Google nie sugerują, że musi istnieć część infoWindow. Ale dla mnie to też nie działa :(

Emil Ahlbäck

11

Oto kolejna wersja, którą napisałem, aby zapisać nieruchomość na mapie, która umieszcza wskaźnik okna informacyjnego na aktualnej długości i długości znacznika, jednocześnie tymczasowo ukrywając znacznik podczas wyświetlania okna informacyjnego.

Eliminuje to również standardowe przypisanie „znacznika” i przyspiesza przetwarzanie, bezpośrednio przypisując nowy znacznik do tablicy znaczników podczas tworzenia znaczników. Zauważ jednak, że dodatkowe właściwości zostały dodane zarówno do znacznika, jak i okna informacyjnego, więc to podejście jest trochę niekonwencjonalne ... ale to ja!

W tych pytaniach dotyczących okna informacyjnego nigdy nie jest wspomniane, że standardowe okno informacyjne NIE JEST umieszczane na szerokości i długości punktu znacznika, ale raczej na górze obrazu znacznika. Aby to działało, widoczność znacznika musi być ukryta, w przeciwnym razie interfejs API Map Google ponownie umieści kotwicę informacyjną z powrotem na górze obrazu znacznika.

Odniesienia do znaczników w tablicy „znaczników” są tworzone natychmiast po deklaracji znaczników dla wszelkich dodatkowych zadań przetwarzania, które mogą być później potrzebne (ukrywanie / pokazywanie, chwytanie współrzędnych itp.). To oszczędza dodatkowego kroku przypisywania obiektu znacznika do „znacznika”, a następnie popychania „znacznika” do tablicy znaczników ... dużo niepotrzebnego przetwarzania w mojej książce.

W każdym razie, inne spojrzenie na okna informacyjne, i mam nadzieję, że pomoże ci to informować i inspirować.

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

Oto działający JSFiddle

Uwaga dodatkowa
Zauważysz w podanych przykładowych danych Google czwarte miejsce w tablicy „lokalizacje” z numerem. Biorąc to pod uwagę w tym przykładzie, możesz również użyć tej wartości dla identyfikatora znacznika zamiast bieżącej wartości pętli, tak aby ...

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],
  });
};

Olśnienie
źródło

10

Zaakceptowana odpowiedź, przepisana w 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);
  })
})

jeziora
źródło

6

Link źródłowy

Link demonstracyjny

Uzupełnij kod HTML

Pokaż InfoWindow po kliknięciu lub najechaniu kursorem.
Wyświetlony zostanie tylko jeden 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>

Code Spy
źródło

1

Dziękuję za to closeOtherInfo, że nie znalazłem przyzwoitego rozwiązania do pracy z Merkercluster, dopóki nie udzielisz odpowiedzi. :)

Chris Loughnane

1

Właśnie tego szukałem. Dzięki człowiek działa świetnie w 2020 roku

Faizan Anwer Ali Rupani

5

Dodaj znacznik w swoim programie jest bardzo łatwe. Możesz po prostu dodać ten kod:

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

Następujące pola są szczególnie ważne i często ustawiane podczas konstruowania znacznika:

position(wymagane) określa LatLng identyfikujący początkową lokalizację znacznika. Jednym ze sposobów wyszukiwania LatLng jest użycie usługi Geokodowania .
map(opcjonalnie) określa mapę, na której ma zostać umieszczony znacznik. Jeśli nie określisz mapy budowy znacznika, znacznik zostanie utworzony, ale nie zostanie dołączony (lub wyświetlony) na mapie. Możesz dodać znacznik później, wywołując setMap()metodę znacznika .

Zauważ , że w przykładzie pole tytułu ustawia tytuł znacznika, który pojawi się jako podpowiedź.

Możesz zapoznać się z dokumentacją Google API tutaj .

To kompletny przykład ustawienia jednego znacznika na mapie. Bądź ostrożny, musisz zastąpić YOUR_API_KEYgo kluczem 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>

Teraz, jeśli chcesz narysować znaczniki tablicy na mapie, powinieneś zrobić tak:

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

Ten przykład daje mi następujący wynik:

Możesz również dodać infoWindow do swojego kodu PIN. Potrzebujesz tylko tego kodu:

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

Możesz mieć dokumentację Google o infoWindows tutaj .

Teraz możemy otworzyć okno informacji, gdy znacznik ma postać „clik” w następujący sposób:

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.
            });

Pamiętaj , że możesz mieć trochę dokumentacji Listener tutaj w Google Developers.

I wreszcie, możemy wykreślić infoWindow w markerze, jeśli użytkownik go kliknie. To jest mój pełny kod:

<!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>

Zwykle powinieneś otrzymać ten wynik:

SphynxTech
źródło

4

W odpowiedzi na odpowiedź Daniela Vassallo , oto wersja, która w prostszy sposób zajmuje się kwestią zamknięcia.

Ponieważ ponieważ wszystkie znaczniki będą miały indywidualne InfoWindow, a ponieważ JavaScript nie ma znaczenia, jeśli dodasz dodatkowe właściwości do obiektu, wszystko, co musisz zrobić, to dodać InfoWindow do właściwości Markera, a następnie wywołać sam .open()z niego InfoWindow !

Edycja: Przy wystarczającej ilości danych ładowanie strony może zająć dużo czasu, więc zamiast budować InfoWindow ze znacznikiem, konstrukcja powinna się odbywać tylko w razie potrzeby. Zauważ, że wszelkie dane użyte do budowy InfoWindow muszą być dołączone do Markera jako właściwość ( data). Pamiętaj również, że po pierwszym zdarzeniu kliknięcia infoWindowpozostanie on jako właściwość jego znacznika, więc przeglądarka nie musi się stale odtwarzać.

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

Matthew Cordaro
źródło

2

Oto prawie kompletna przykładowa funkcja javascript, która pozwoli na wiele markerów zdefiniowanych w JSONObject.

Wyświetla tylko znaczniki znajdujące się w granicach mapy.

Jest to ważne, abyś nie wykonywał dodatkowej pracy.

Możesz także ustawić limit znaczników, aby nie wyświetlać ekstremalnej ilości znaczników (jeśli istnieje możliwość użycia czegoś);

nie będzie również wyświetlać znaczników, jeśli środek mapy nie zmienił się więcej niż 500 metrów.
Jest to ważne, ponieważ jeśli użytkownik kliknie znacznik i przypadkowo przeciągnie mapę, robiąc to, nie chcesz, aby mapa ponownie załadowała znaczniki.

Podłączyłem tę funkcję do nasłuchiwania zdarzeń bezczynności mapy, aby znaczniki były wyświetlane tylko wtedy, gdy mapa jest bezczynna, i ponownie wyświetlają znaczniki po innym zdarzeniu.

W zrzucie ekranu akcji jest niewielka zmiana w zrzucie ekranu pokazującym więcej treści w oknie informacyjnym. wklejony z pastbin.com

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>

Rozwiń fragment kodu

Piorun
źródło

0

Oto przykład wielu markerów w Reactjs .

Poniżej znajduje się element mapy

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
źródło

Google Maps JS API v3 - Prosty przykład wielu markerów

Odpowiedzi:

Zaakceptowana odpowiedź, przepisana w ES6: