同じマップ上で複数のマーカーを使用してGoogle Maps APIを使用する方法

Question

ですから、Google Maps APIを使用するための次のスクリプトがありますが、それでも複数のマーカー（何かを指しているバルーンの形をしたアイコン）を持つマップを作成する必要があり、それらのマーカーのそれぞれが必要ですマップの別の領域（つまり、異なる座標）をポイントするには、どうすればよいですか？

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

もう1つの質問です。スクリプトテキストを変数として渡すと、次のようになります。

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

と私の<！> lt;％= ScriptText％<！> gt;私は構築し、その値をScriptTextと呼ばれるFriendまたはPublic変数に割り当てる文字列になりますが、それはまだ実行され、適切に動作しますか？ （私はスクリプトを動的にし、javascriptingの非識字のために、STRINGとしてそれを構築する方法に基づいて異なるようにします; P）

Answer 1

obeattieとgregersはどちらも正しいです。一般に、後で少なくとも2回使用する何らかの種類の配列にマーカーパラメーターを保存する必要があります。

1. 地図にオーバーレイを追加するとき
2. 中心点とズームレベルを計算するためにGLatLngBoundsオブジェクトに追加する場合

配列またはマーカーは、次のようなオブジェクトの配列のように見えます。

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

マーカーを追加するコードは次のようになります。

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

クライアント側javascript内でのサーバー側スクリプトの使用に関する質問については、はい、それらを一緒に混在させることができます。あなたの説明から判断すると、これがあなたがする必要があることだと思います：

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

http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

新しい GMarker マップ上でマークする各場所に対して。 GLatLng sについては、こちらで入手できる優れたドキュメントがあります。

<=>を作成するには、ドキュメントから、マーカーをドロップする場所を表す<=>を最初に作成する必要があることがわかります。バルーン内にコンテンツが必要なことについては言及していませんので、それは単にあなたが求めているマーカーであると想定しています。あなたの場合、コードはおそらく次のようになります：

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

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

ここで何が起こっているのかを正確に伝えることができると確信していますが、念のため、<=>オブジェクトの配列を作成し（これは任意の長さ（範囲内）が可能です）、繰り返し処理します、配列に定義されている各<=>のマーカーをマップに追加します。

多数のマーカーの作成を計画している場合は、マーカーマネージャー。多数のマーカーの同時レンダリングを高速化します（画面の1つの領域に多数ある場合、オフスクリーンマーカーをレンダリングせず、オンスクリーンマーカーを凝縮します）。 。

Answer 3

obeattieはあなたの質問に非常によく答えました。しかし、サンプルコードからは、マーカーを含む領域にマップをズームしたいようです。複数のマーカーでこれを行うには、 GLatLngBounds を作成しますマーカーごとに延長します。その後、境界オブジェクトからマーカーのコレクションに合う中心とズームを取得できます。

    var markerBounds = GLatLngBounds（）;     var coord = null;     for（markerCoordsの座標）{         coord = new GMarker（coord）;         map.addOverlay（）;         markerBounds.extend（coord）;     };

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

map.setCenter(markersCenter, markersZoom);

G_HYBRID_MAPについて100％確信が持てません。 getBoundsZoomLevel 。ただし、正しく覚えていれば、G_HYBRID_MAPは GMapType 。

Answer 4

このようなものがありますが、イベントが機能しません。オブジェクトのコンストラクター内にリスナーを追加できますか？

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