2014-12-02(Tue)

OpenLayersを使ってOSM(OpenStreetMap)を表示する

test.heml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<!--
<link rel="stylesheet" href="test.css" type="text/css" >
<script type="text/javascript" src="test.js"></script>
-->
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
function init() {
var map = new OpenLayers.Map("canvas");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);

var lonLat = new OpenLayers.LonLat(139.76, 35.68)
.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
);
map.setCenter(lonLat, 15);
}
</script>
<title>OSMで地図を表示</title>
</head>
<body onload="init();">
<div id="canvas" style="width:500px; height:400px"></div>
</body>
</html>

test.css
#canvas .olControlAttribution {
font-size:13px;
bottom:3px;
}

こんな感じに表示されます。
osm20141202.png

プロフィール

yaman

Author:yaman

カレンダー
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
ブログ内検索
カテゴリー
タグリスト

バイク 買い物 アキバ 秋葉原 写真 チャレンジツーリング アフィリエイト ゲーム パソコン バトルフィールド カメラ 漫画 道の駅スタンプブック 株式投資 DTV  ロト7 ダーツ バトルフィールド2142 Linux Ubuntu 大戸屋 ハイウェイスタンプ PT2 プログラミング 温泉 Git 飲み食い 書籍 アニメ Windows Ingress SSTR ラジオ会館 日本酒 Windows10 機械工作 TortoiseGit VMware Javascript バトルフィールド4 LightWave  ホビー YSP Windows7 仕事 WHS バトルフィールド3 日曜大工 電子工作 PC CentOS GoogleMap ビリヤード Subversion ドネルケバブ PSP 晩飯 チャンダン 歯医者 Chrome 動画エンコード 料理 THETA 酒造 月例ツーリング ロト6 コミケ ラーメン Windows8 CD バトルフィールド2 宝くじ Android OSM バトルフィールド・バッドカンパニー2 

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
FC2カウンター
現在の閲覧者数
現在の閲覧者数:
Twitter
リンク
RSSフィード
コミックダッシュ