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

カレンダー
09 | 2017/10 | 11
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
29 30 31 - - - -
ブログ内検索
カテゴリー
タグリスト

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

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