プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

静的なマーカーの表示

[OpenLayers] OpenLayers によるOpenStreetMap の表示 では、OpenLayersを使って地図を表示しました。次は、マーカーを追加したいと思います。

 

静的なマーカーの表示

最初は、静的なマーカーを表示してみます。index.html は前と同じようにしておきますがファイル名・関数名などは適宜読み替えてください。

static_marker_sample.js

// 
// Static Marker sample
// http://openstreetmap.piyolab.net/markeronmap.php を参考
//
function static_marker_sample() {
    
    var options = {
        controls:[
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.NavToolbar(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.ScaleLine(),
//         new OpenLayers.Control.ZoomPanel(),
            new OpenLayers.Control.Attribution()
            ],
    };
    
    var map = new OpenLayers.Map("demoMap", options);
    map.addLayer(new OpenLayers.Layer.OSM());
    
    console.log(map.getProjectionObject().getCode());
    
    map.setCenter(new OpenLayers.LonLat(139.76, 35.68)
        .transform(
                new OpenLayers.Projection("EPSG:4326"),  // WGS84
                new OpenLayers.Projection("EPSG:3857")   // Google Map / OSM / etc の球面メルカトル図法
        ), 8
    );
    
    // マーカー
    var markers = new OpenLayers.Layer.Markers("Markers");
    map.addLayer(markers);
    var marker = new OpenLayers.Marker(
        new OpenLayers.LonLat(139.76, 35.68)
            .transform(
                new OpenLayers.Projection("EPSG:4326"),
                new OpenLayers.Projection("EPSG:900913")
            )
    );
    markers.addMarker(marker);  

    var marker2 = new OpenLayers.Marker(
            new OpenLayers.LonLat(140.76, 35.68)
                .transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    new OpenLayers.Projection("EPSG:900913")
                )
        );
    markers.addMarker(marker2);     
}
 

  
マーカーを表示する最も簡単な方法は、OpenLayers.Layer.Markers レイヤーを使うことです。

31行目でMarkersレイヤーを作り、32行目で、Mapに追加しています。

33~39行目では、マーカーの位置情報を与えて、生成を行い、40行目で作ったマーカーをMarkersレイヤーに追加しています。

42~49行目も別の位置にあるマーカーについて同じ処理を行っています。

 

ただ、この方法は、OpenLayers v2.x でも古い方法とされていて、Vectorレイヤーを使う方法が推奨されています。

次は、Vectorレイヤーを使ったマーカーの表示を行いたいと思います。

 

参考

こちらのサイトを参考にしました。