Google Maps JS API v3 - Esempio di marcatore multiplo semplice


657

Abbastanza nuovo per l'API di Google Maps. Ho una serie di dati che voglio scorrere e tracciare su una mappa. Sembra abbastanza semplice, ma tutti i tutorial multi-marker che ho trovato sono piuttosto complessi.

Usiamo l'array di dati dal sito di Google per un esempio:

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

Voglio semplicemente tracciare tutti questi punti e fare apparire una finestra informativa quando si fa clic per visualizzare il nome.

Risposte:


1128

Questo è il modo più semplice per ridurlo a:

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

👨‍💻 Modifica / fork su un Codepen →

IMMAGINE DELLO SCHERMO

Marcatori multipli di Google Maps

Si sta verificando un po 'di magia di chiusura quando si passa l'argomento callback al addListenermetodo. Questo può essere un argomento piuttosto complicato se non si ha familiarità con il funzionamento delle chiusure. Suggerirei di consultare il seguente articolo di Mozilla per una breve introduzione se fosse il caso:

Mozilla Dev Center: lavorare con le chiusure


4
@RaphaelDDL: Sì, quelle parentesi sono necessarie per invocare effettivamente la funzione senza nome. Gli argomenti devono essere passati a causa del modo in cui JavaScript funziona (a causa delle chiusure). Vedi la mia risposta a questa domanda per un esempio e ulteriori informazioni: stackoverflow.com/a/2670420/222908
Daniel Vassallo

Buona risposta, ma potrebbe essere ulteriormente semplificata. Dal momento che poiché tutti i marcatori avranno InfoWindows individuali e poiché JavaScript non importa se aggiungi proprietà extra a un oggetto, tutto ciò che devi fare è aggiungere un InfoWindowalle proprietà del Marker e quindi chiamare .open()la InfoWindow da sé. Avrei pubblicato la modifica qui, ma le modifiche erano abbastanza grandi da pubblicare la mia risposta .
Matthew Cordaro,

Perché non usarlo new MarkerClusterer()per un imponente spettacolo? Dai un'occhiata alla risposta di ChirsSwires.
DevWL

ciao @ Daniel Vassallo, anch'io ho lo stesso requisito per visualizzare più marcatori nel mio progetto angolare ionico. aiutatemi, ho già fatto una domanda su StackOverflow. ecco il link della domanda: stackoverflow.com/questions/57985967/…
Saif

Funziona. Grazie. Come rimuoverete i marker da google map perché state usando una singola istanza di marker e inizializzate in loop. Per favore, condividi i tuoi pensieri.
Kamlesh,

59

Ecco un altro esempio di caricamento di più marker con un unico titlee infoWindowtesto. Testato con l'ultima API di 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>

Schermata di 250 marcatori:

API di Google Maps V3.11 con più marcatori

Casualmente, Lat / Lng verrà randomizzato per renderlo unico. Questo esempio sarà molto utile se si desidera testare marcatori e prestazioni di 500, 1000, xxx.


1
Fai attenzione quando pubblichi copia e incolla le risposte testuali / testuali a più domande, queste tendono ad essere contrassegnate come "spam" dalla community. Se lo stai facendo, di solito significa che le domande sono duplicate, quindi segnalale come tali.
Kev

1
Questo farà apparire molti pop-up infoWindowper ogni marker e non nasconderà l'altro infoWindowse è attualmente mostrato. è davvero utile :)
Kannika il

@Anup, se hai appena letto la domanda e commentato sarebbe meglio. la domanda è "esempio per marcatore multiplo" se è casuale o il tuo bla bla.
Madan Sapkota,

Ancora una volta, perché non usarlo new MarkerClusterer()per un imponente spettacolo? Dai un'occhiata alla risposta di ChirsSwires.
DevWL

1
@DevWL, ha ricevuto una risposta nel 2013. Sei libero di aggiornare.
Madan Sapkota,

39

Ho pensato di metterlo qui perché sembra essere un punto di approdo popolare per coloro che iniziano a utilizzare le API di Google Maps. Più marker resi sul lato client sono probabilmente la caduta di molte applicazioni di mappatura in termini di prestazioni. È difficile eseguire il benchmarking, correggere e in alcuni casi persino stabilire che esiste un problema (a causa delle differenze nell'implementazione del browser, dell'hardware disponibile per il client, dei dispositivi mobili, l'elenco potrebbe continuare).

Il modo più semplice per iniziare a risolvere questo problema è utilizzare una soluzione di clustering dei marker. L'idea di base è quella di raggruppare posizioni geograficamente simili in un gruppo con il numero di punti visualizzati. Man mano che l'utente ingrandisce la mappa, questi gruppi si espandono per rivelare i singoli indicatori sottostanti.

Forse la più semplice da implementare è la libreria markerclusterer . Un'implementazione di base sarebbe la seguente (dopo l'importazione delle librerie):

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

I marcatori invece di essere aggiunti direttamente alla mappa vengono aggiunti a un array. Questa matrice viene quindi passata alla libreria che gestisce calcoli complessi per te e allegata alla mappa.

Queste implementazioni non solo aumentano notevolmente le prestazioni lato client, ma in molti casi portano a un'interfaccia utente più semplice e meno ingombrante e una più facile digestione dei dati su scale più grandi.

Altre implementazioni sono disponibili da Google.

Spero che questo aiuti alcune di quelle più recenti alle sfumature della mappatura.


2
Grazie, un grande aiuto! Esiste una differenza di ordine o grandezza nelle prestazioni, facendo prima i punti dati google.map e poi passandoli alla libreria di mappatura, in questo caso MarketCluster da tracciare. con circa 150.000 punti dati il ​​primo post di "Daniel Vassallo" ha impiegato circa 2 minuti per caricare, questi 5 secondi. Grazie mille "Swires"!
Waqas,

1
Pensavo che sarebbe stato un buon posto per questo, immagino che la maggior parte delle persone atterrerà in primo piano quando è collegata a Google Maps questa pagina, e in secondo luogo c'è "perché la mia mappa impiega così tanto tempo a caricarsi".
ChrisSwires il

@Monic è qualunque sia il tuo set di dati, è solo una variabile segnaposto.
ChrisSwires

20

Versione asincrona:

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

15

Questa è l'immagine della mappa di esempio funzionante

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

    }); 
} 

Esempio di lavoro completo. Puoi semplicemente copiare, incollare e utilizzare.


12

Da esempi dell'API di 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]
    });
  }
}

8
questa risposta non include la parte
InfoWindow

@omat Stranamente i documenti di Google non suggeriscono che ci debba essere una parte della finestra informativa. Ma non funziona neanche per me :(
Emil Ahlbäck

11

Ecco un'altra versione che ho scritto per salvare la mappa immobiliare, che posiziona il puntatore della finestra sul lat e sul long del marker, nascondendo temporaneamente il marker mentre la finestra viene visualizzata.

Elimina inoltre l'assegnazione standard dei marcatori e accelera l'elaborazione assegnando direttamente il nuovo marcatore alla matrice dei marcatori durante la creazione dei marcatori. Nota, tuttavia, che sono state aggiunte proprietà aggiuntive sia al marker che alla finestra, quindi questo approccio è un po 'non convenzionale ... ma sono io!

In queste domande della finestra non viene mai menzionato che la finestra standard NON è posizionata in corrispondenza della lat lat e del punto del marker, ma piuttosto nella parte superiore dell'immagine del marker. La visibilità del marker deve essere nascosta affinché funzioni, altrimenti l'API di Maps riporterà di nuovo l'ancora della finestra nella parte superiore dell'immagine del marker.

Il riferimento ai marcatori nell'array "marcatori" viene creato immediatamente dopo la dichiarazione del marcatore per eventuali attività di elaborazione aggiuntive che possono essere desiderate in seguito (nascondere / mostrare, afferrare i coord, ecc ...). Questo evita il passaggio aggiuntivo di assegnare l'oggetto marker a "marker", e quindi di spingere il "marker" nella matrice dei marker ... molta elaborazione non necessaria nel mio libro.

Ad ogni modo, una visione diversa di Windows, e spero che ti aiuti a informarti e ispirarti.

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

Ecco un JSFiddle funzionante

Nota aggiuntiva
In questo dato dati di esempio di Google noterai un quarto posto nella matrice "località" con un numero. Dato questo nell'esempio, potresti anche usare questo valore per l'id marker al posto del valore del loop corrente, in modo che ...

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

Risposta accettata, riscritta in 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);
  })
})

6

Link alla fonte

Link dimostrativo

Codice HTML completo

  • Mostra InfoWindow su Click o Hover.
  • Verrà mostrato solo un InfoWindow

inserisci qui la descrizione dell'immagine

    <!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
Grazie per closeOtherInfo, non sono riuscito a trovare una soluzione decente per lavorare con Merkercluster fino alla tua risposta. :)
chris loughnane,

1
Questo è quello che stavo cercando. Grazie, l'uomo lavora alla grande nel 2020
Faizan Anwer Ali Rupani, il

5

Aggiungere un marker nel tuo programma è molto semplice. Puoi semplicemente aggiungere questo codice:

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

I seguenti campi sono particolarmente importanti e comunemente impostati quando si costruisce un marcatore:

  • position(obbligatorio) specifica un LatLng che identifica la posizione iniziale del marker. Un modo per recuperare un LatLng è utilizzare il servizio di geocodifica .
  • map(facoltativo) specifica la mappa su cui posizionare il marker. Se non si specifica una mappa sulla costruzione del marker, il marker viene creato ma non è attaccato (o visualizzato sulla) mappa. È possibile aggiungere il marker in un secondo momento chiamando il setMap()metodo del marker .

Nota , nell'esempio, il campo del titolo imposta il titolo del marcatore che apparirà come una descrizione comandi.

Puoi consultare la documentazione di Google API qui .


Questo è un esempio completo per impostare un indicatore in una mappa. Stai attento, devi sostituire YOUR_API_KEYcon la tua chiave API di 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>


Ora, se vuoi tracciare i marker di un array in una mappa, dovresti fare così:

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

Questo esempio mi dà il seguente risultato:

inserisci qui la descrizione dell'immagine


Puoi anche aggiungere una finestra informativa nel tuo pin. Hai solo bisogno di questo codice:

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

Puoi avere la documentazione di Google su infoWindows qui .


Ora, possiamo aprire la finestra informativa quando l'indicatore è "clik" in questo modo:

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

Nota , puoi avere della documentazione Listener qui su Google Developer.


E, infine, possiamo tracciare una finestra informativa in un marker se l'utente fa clic su di essa. Questo è il mio codice completo:

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

Normalmente, dovresti avere questo risultato:

Il tuo risultato


4

A seguito della risposta di Daniel Vassallo , ecco una versione che affronta il problema della chiusura in modo più semplice.

Dal momento che poiché tutti i marker avranno una InfoWindow individuale e poiché JavaScript non importa se aggiungi proprietà extra a un oggetto, tutto ciò che devi fare è aggiungere una InfoWindow alle proprietà del Marker e quindi chiamare .open()la InfoWindow da sola!

Modifica: con dati sufficienti, il pageload potrebbe richiedere molto tempo, quindi anziché costruire l' InfoWindow con l'indicatore, la costruzione dovrebbe avvenire solo quando necessario. Si noti che tutti i dati utilizzati per costruire l' InfoWindow devono essere aggiunti al Marker come proprietà ( data). Si noti inoltre che dopo il primo evento di clic, infoWindowpersisterà come proprietà del suo marcatore, quindi il browser non deve ricostruire costantemente.

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

Ecco una funzione javascript di esempio quasi completa che consentirà più marker definiti in un oggetto JSONObject.

Visualizzerà solo i marcatori che si trovano nei limiti della mappa.

Questo è importante, quindi non stai facendo un lavoro extra.

Puoi anche impostare un limite ai marker in modo da non mostrare un numero estremo di marker (se esiste la possibilità di qualcosa nel tuo utilizzo);

inoltre non visualizzerà gli indicatori se il centro della mappa non è cambiato per più di 500 metri.
Questo è importante perché se un utente fa clic sul marker e trascina accidentalmente la mappa mentre lo fa, non si desidera che la mappa ricarichi i marker.

Ho collegato questa funzione al listener di eventi inattivi per la mappa in modo che gli indicatori mostrino solo quando la mappa è inattiva e visualizzeranno di nuovo gli indicatori dopo un evento diverso.

Nella schermata dell'azione c'è un piccolo cambiamento nella schermata che mostra più contenuti nella finestra. inserisci qui la descrizione dell'immagine incollato da pastbin.com

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


0

Ecco un esempio di marcatori multipli in Reactjs .

inserisci qui la descrizione dell'immagine

Di seguito è riportato il componente della mappa

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,
};
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.