So verwenden Sie Google Maps API mit mehreren Markern auf der gleichen Karte

Question

Also, ich habe das folgende Skript Google Maps-API zu verwenden, es ist alles in Ordnung, aber ich brauche, um eine Karte zu erstellen, die mehr als einen Marker (der Ballon geformt Symbol auf etwas zeigt) hat, und ich brauche jede dieser Markierungen einen anderen Bereich der Karte Punkt auf (dh verschiedene Koordinaten), wie ich es tun kann?

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

Noch eine Frage, wenn ich das Script Text als Variable übergeben, kann sagen, so etwas wie:

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

und mein <% = ScriptText%> wird eine Zeichenfolge sein, die ich seinen Wertes an einen Freund oder öffentlichen Variable erstellen und zuweisen ScriptText genannt, wird es noch richtig laufen und arbeiten? (I dies tue mein Skript dynamisch und andere basiert zu machen, wie ich bauen es als STRING, aufgrund meiner Analphabetismus in Javascripting; P)

Answer 1

obeattie und gregers sind beide recht. In der Regel müssen Sie den Marker-Parameter in einer Art von Array speichern, die Sie später an-mindestens zweimal verwenden:

1. beim Hinzufügen des Overlays auf der Karte
2. , wenn es um ein GLatLngBounds Objekt Hinzufügen der Mittelpunkt und die Zoomstufe zu berechnen

Das Array oder Marker wie ein Array von Objekten aussehen würde, so etwas wie:

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

Der Code Marker für das Hinzufügen von etwas aussehen würde ähnlich wie:

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

Was Ihre Frage über die Verwendung von serverseitigen Skript in Client-Seite JavaScript aktivieren, ja man sie zusammen mischen. Gemessen an Ihrer Beschreibung, ich glaube, das ist, was Sie tun müssen:

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

Ich habe einen Artikel im Internet abrufbar: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

Sie müssen eine neue GMarker jede gewünschte Stelle auf der Karte zu markieren. Es ist durchaus eine gute Dokumentation verfügbar hier GMarkers.

ein GMarker erstellen, werden Sie von der Dokumentation, die Sie müssen zuerst eine GLatLng, die den Ort Sie die Markierung löschen wollen erstellen. Sie haben keine Inhalte in einem Ballon erwähnt zu wollen, so dass ich nehme an, es ist nur der Marker Sie nach. In Ihrem Fall würde der Code wahrscheinlich so etwas wie folgt aussehen:

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

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

Ich bin sicher, dass Sie wahrscheinlich genau sagen kann, was hier vor sich geht, aber nur für den Fall, erstelle ich ein Array von GLatLng Objekten (dies kann beliebig lang sein [in Grenzen haha]) und dann über sie iterieren und fügte hinzu, Markierungen auf der Karte für jeden GLatLng im Array definiert.

Wenn Sie auf die Schaffung einer Menge von Markern planen, werden Sie wahrscheinlich feststellen, es nützlich, die Marker-Manager , die eine Menge von Markierungen Rendering gleichzeitig beschleunigen wird (durch nicht off-Screen-Rendering-Marker und auf den Bildschirm derjenigediejenigedasjenige Kondensieren wenn es eine Menge in einem Bereich des Bildschirms ist) .

Answer 3

obeattie beantwortet Ihre Frage ziemlich gut. Aber aus Ihrem Beispiel-Code, so scheint es, wie Sie auch die Karte wollen auf den Bereich der Marker enthält, um es zu vergrößern. Um dies zu tun mit mehreren Markern, können Sie erstellen ein GLatLngBounds dass Sie für jede Markierung erweitern. Sie können dann in die Mitte und Zoom erhalten, die für Ihre Sammlung von Markern aus dem Grenzen Objekt paßt.

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

Ich bin nicht 100% sicher über die G_HYBRID_MAP. getBoundsZoomLevel , aber wenn ich mich richtig erinnere, G_HYBRID_MAP ist eine Instanz von GMapType .

Answer 4

Ich habe so etwas wie dies aber die Ereignisse nicht funktioniert. Kann ich Zuhörer innerhalb eines Konstruktor des Objekts hinzufügen?

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