Come utilizzare l'API di google maps con più marcatori sulla stessa mappa

Question

Quindi, ho il seguente script per usare l'API di google maps, va tutto bene, ma devo creare una mappa che ha più di un marcatore (l'icona a forma di palloncino che punta a qualcosa) e ho bisogno di ognuno di quei marcatori per puntare su una diversa area della mappa (cioè diverse coordinate), come posso farlo?

<script type="text/javascript">

         function load() {

        var map = new GMap2(document.getElementById("map"));
        var marker = new GMarker(new GLatLng(<%=coordinates%>));

        var html="<img src='simplemap_logo.jpg' width='20' height='20'/> " +
             "<%=maptitle%><br/>" +
             "<%=text%>";



        map.setCenter(new GLatLng(<%=coordinates%>), <%=zoom%>)
        map.setMapType(G_HYBRID_MAP);
        map.addOverlay(marker);
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GMapTypeControl());


        marker.openInfoWindowHtml(html);
        }

        //]]>
        </script>

Un'altra domanda, se passo il testo dello script come variabile, diciamo qualcosa del tipo:

<script type="text/javascript">
<%=ScriptText%>
</script>

e my <% = ScriptText% > sarà una stringa che costruirò e assegnerò il suo valore a un amico o una variabile pubblica chiamata ScriptText, funzionerà e funzionerà correttamente? (Lo sto facendo per rendere il mio script dinamico e diverso in base al modo in cui lo costruisco come STRING, a causa del mio analfabetismo nel javascript; P)

Answer 1

obeattie e gregers hanno entrambi ragione. In generale, è necessario memorizzare i parametri del marker in una sorta di array che in seguito verrà utilizzato almeno due volte:

1. quando si aggiunge l'overlay alla mappa
2. quando lo si aggiunge a un oggetto GLatLngBounds per calcolare il punto centrale e il livello di zoom

La matrice o i marcatori sembrerebbero una matrice di oggetti, qualcosa del tipo:

var latlng1 = [
    new GLatLng( 48.1234, -120.1234 ),
    new GLatLng( 48.5678, -120.5678 ),
    new GLatLng( 48.9101, -120.9112 ),
    new GLatLng( 48.1121, -120.1314 ),
    new GLatLng( 48.3145, -120.1516 ),
    new GLatLng( 48.1617, -120.1718 ),
    new GLatLng( 48.1819, -120.1920 ),
    new GLatLng( 48.2021, -120.2122 )
];

Il codice per aggiungere marcatori sarebbe simile a:

  // assume that map1 is an instance of a GMap2 object

  // #0 -- google maps api requires us to call setCenter first before calling any other operation on the map
  map1.setCenter( new GLatLng( 0, 0 ), 0 );

  // #1 -- add markers
  for ( var i = 0; i < latlng1.length; i++ )
  {
    var marker = new GMarker( latlng1[ i ] );
    map1.addOverlay( marker );
  }

  // #2a -- calculate center
  var latlngbounds = new GLatLngBounds( );
  for ( var i = 0; i < latlng1.length; i++ )
  {
    latlngbounds.extend( latlng1[ i ] );
  }

  // #2b -- set center using the calculated values
  map1.setCenter( latlngbounds.getCenter( ), map1.getBoundsZoomLevel( latlngbounds ) );

Per quanto riguarda la tua domanda sull'utilizzo dello script lato server all'interno di javascript lato client, sì, puoi mescolarli insieme. A giudicare dalla tua descrizione, penso che questo sia ciò che devi fare:

<script type="text/javascript">
    var latlng1 = new Array( );
</script>
<script type="text/javascript">
    <%
        do until rs.eof
            %>
            latlng1.push( new GLatLng( parseFloat( '<%= rs( "Lat" ) %>' ), parseFloat( '<%= rs( "Lng" ) %>' ) ) );
            <%
            rs.movenext
        loop
    %>
</script>

Ho pubblicato un articolo su: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

Dovrai creare un nuovo GMarker per ogni luogo che si desidera contrassegnare sulla mappa. C'è abbastanza buona documentazione disponibile qui per GLatLng s.

Per creare un <=>, dalla documentazione verrà visualizzato innanzitutto che è necessario creare un <=> che rappresenti la posizione in cui si desidera rilasciare l'indicatore. Non hai mai detto di voler contenuti in una mongolfiera, quindi suppongo sia solo il marker che stai cercando. Nel tuo caso, il codice sarebbe probabilmente simile a questo:

var markerCoords = [
    new GLatLng(<latitude>, <longitude>),
    new GLatLng(<latitude>, <longitude>),
    [...]
];

for (coord in markerCoords){
    map.addOverlay(new GMarker(coord));
};

Sono sicuro che probabilmente puoi dire esattamente cosa sta succedendo qui, ma per ogni evenienza, creo un array di <=> oggetti (questo può essere di qualsiasi lunghezza [entro i limiti haha]), e quindi scorrere su di esso , aggiungendo marcatori alla mappa per ogni <=> definito nella matrice.

Se stai pensando di creare molti marker, probabilmente troverai utile usare Marker Manager , che accelera il rendering di molti marker contemporaneamente (non eseguendo il rendering di marker off-screen e condensando sullo schermo se ce ne sono molti in una regione dello schermo) .

Answer 3

obeattie ha risposto abbastanza bene alla tua domanda. Ma dal tuo codice di esempio, sembra che desideri anche che la mappa esegua lo zoom sull'area contenente gli indicatori. Per fare ciò con più marker, puoi creare un GLatLngBounds che estendi per ogni marker. Puoi quindi ottenere il centro e lo zoom che si adatteranno alla tua raccolta di marcatori dall'oggetto limiti.

    var markersBounds = GLatLngBounds ();     var coord = null;     for (coord in markerCoords) {         coord = new GMarker (coord);         map.addOverlay ();         markersBounds.extend (coord);     };

var markersCenter = markersBounds.getCenter();
var markersZoom = G_HYBRID_MAP.getBoundsZoomLevel(markersBounds);

map.setCenter(markersCenter, markersZoom);

Non sono sicuro al 100% di G_HYBRID_MAP. getBoundsZoomLevel , ma se ricordo bene, G_HYBRID_MAP è un'istanza di GMapType .

Answer 4

Ho qualcosa del genere ma gli eventi non funzionano. Posso aggiungere ascoltatori all'interno di un costruttore di oggetti?

//Localization object onstructor
function Localization(width, height, description, img_source){
    this.point = new GLatLng(width, height);
    this.marker = new GMarker(this.point);
    this.description = description;
    this.img_source = img_source;
    GEvent.addListener(this.marker, "click", function(){marker.openInfoWindowHtml(this.description);});
}

//map localizations to show on map
var localizations = [
    new Localization( 52.9015797, 15.2602200, 'Poznań1', 'eye1' ),
    new Localization( 52.9025797, 15.1602200, 'Poznań2', 'eye2' ),
    new Localization( 52.9035797, 15.2702200, 'Poznań3', 'eye3' ),
    new Localization( 52.9045797, 15.2102200, 'Poznań4', 'eye4' ),
]

var map = new GMap2(document.getElementById("mapa"));
map.setCenter(localizations[3].point, 13);
map.setUIToDefault();


for(i=0; i < localizations.length; i++){
    localization=localizations[i];
    map.addOverlay(localization.marker);
    localization.marker.openInfoWindowHtml(localization.description);
}