Comment utiliser l'API Google Maps avec plusieurs marqueurs sur la même carte

Question

J'ai donc le script suivant pour utiliser l'API Google Maps. Tout va bien, mais je dois créer une carte comportant plusieurs marqueurs (l'icône en forme de ballon pointant vers quelque chose) et j'ai besoin de chacun de ces marqueurs. pour pointer sur une zone différente de la carte (c.-à-d. des coordonnées différentes), comment puis-je le faire?

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

Une autre question, si je passe le texte du script en tant que variable, disons quelque chose comme:

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

et mon <% = ScriptText% > sera une chaîne que je construirai et assignerai sa valeur à une variable publique ou à un ami appelée ScriptText, fonctionnera-t-il et fonctionnera-t-il toujours correctement? (Je le fais pour rendre mon script dynamique et différent en fonction de la manière dont je le construis en tant que chaîne, en raison de mon analphabétisme en javascript; P)

Answer 1

obeattie et gregers ont tous les deux raison. En général, vous devez stocker les paramètres de marqueur dans un type de tableau que vous utiliserez plus tard au moins deux fois:

1. lors de l'ajout de la superposition à la carte
2. lors de l'ajout à un objet GLatLngBounds pour calculer le point central et le niveau de zoom

Le tableau ou les marqueurs ressemblent à un tableau d'objets, comme suit:

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

Le code permettant d'ajouter des marqueurs ressemblerait à quelque chose comme:

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

En ce qui concerne votre question sur l’utilisation du script côté serveur dans le javascript côté client, vous pouvez les mélanger. À en juger par votre description, je pense que c’est ce que vous devez faire:

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

J'ai posté un article sur: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

Vous devrez créer un nouveau GMarker pour chaque lieu que vous souhaitez marquer sur la carte. Il existe une assez bonne documentation disponible ici pour GLatLng s.

Pour créer un <=>, la documentation indique qu’il faut d’abord créer un <=> représentant l’emplacement où vous souhaitez supprimer le marqueur. Vous n'avez pas mentionné vouloir du contenu dans une bulle, alors je suppose que c'est simplement le marqueur que vous recherchez. Dans votre cas, le code ressemblerait probablement à ceci:

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

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

Je suis sûr que vous pouvez probablement dire exactement ce qui se passe ici, mais juste au cas où, je crée un tableau d'objets <=> (cela peut être de n'importe quelle longueur [dans les limites haha]), puis je le répète , ajout de marqueurs à la carte pour chaque <=> défini dans le tableau.

Si vous envisagez de créer de nombreux marqueurs, il sera probablement utile d'utiliser Gestionnaire de marqueurs , ce qui accélérera le rendu de nombreux marqueurs simultanément (en ne rendant pas les marqueurs hors écran et en les condensant à l'écran s'il y en a beaucoup dans une région de l'écran) .

Answer 3

obeattie a très bien répondu à votre question. Mais à partir de votre exemple de code, il semble que vous souhaitiez également que la carte fasse un zoom sur la zone contenant les marqueurs. Pour ce faire avec plusieurs marqueurs, vous pouvez créer un GLatLngBounds . que vous prolongez pour chaque marqueur. Vous pouvez ensuite obtenir le centre et le zoom adaptés à votre collection de marqueurs à partir de l’objet bounds.

    var markersBounds = GLatLngBounds ();     var coord = null;     pour (coord dans 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);

Je ne suis pas sûr à 100% de G_HYBRID_MAP. getBoundsZoomLevel , mais si je me souviens bien, G_HYBRID_MAP est une instance de GMapType .

Answer 4

J'ai quelque chose comme ça mais les événements ne fonctionnent pas. Puis-je ajouter des auditeurs dans un constructeur d'objet?

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