パソコンの小技・備忘録


トップページ > 小技一覧(ホームページ) > OpenStreetMapにパンパネル(上下左右の移動)を表示する。

OpenStreetMapにパンパネル(上下左右の移動)を表示する。

OpenStreetMapにパンパネル(上下左右の移動)を表示する。

下記の例では、OpenStreetMapのAPIを使用して、東京駅周辺を表示し、左上にパンパネル(上下左右の移動)を表示します。

'OpenStreetMapにパンパネル(上下左右の移動)を表示する。
<html>

<head>
  <title>OpenStreetMapにパンパネル(上下左右の移動)を表示する。</title>
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript">
  <!--
    function init() {

      var options = {
        controls:[
          new OpenLayers.Control.Navigation(),
          new OpenLayers.Control.PanPanel()
        ]
      };

      var map = new OpenLayers.Map("map_disp");
      var maplayer = new OpenLayers.Layer.OSM();
      map.addLayer(maplayer);

      var lonLat = new OpenLayers.LonLat(139.766084, 35.681382)
        .transform(
          new OpenLayers.Projection("EPSG:4326"),
          new OpenLayers.Projection("EPSG:900913")
        );
      map.setCenter(lonLat, 15);
    }
  // -->
  </script>
</head>

<body onload="init();">

  <div id="map_disp" style="width:500px; height:400px"></div>

</body>

</html>


実際の表示例



トップページに戻る

パソコンの小技・備忘録トップページ(http://pckowaza.web.fc2.com/)を表示

※更新履歴などを掲載していますので、お気に入りはぜひトップページでお願いします!
inserted by FC2 system