Webページに地図を挿入してみます。
Getting Started... ２２ページ
最初に、Webページを用意します。ka-map/presentation ディレクトリ内に次の内容で practice.html ファイルを作成します。
<html>
<head>
<title>practice</title>
</head>
<body>
<h1>foss4g2007 presentation</h1>
</body>
</html>
２３から２６ページ
次のように追加します。
<html>
<head>
<title>practice</title>
<!--
Add Script ２３ページ
次のようにスクリプトタグをページに追加します。
-->
<script type="text/javascript" src="http://localhost/ka-map/xhr.js">
</script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js">
</script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js">
</script>
<!--
Initialize The Map ２６ページ
次のように、スクリプトタグを追加します。
-->
<script type="text/javascript">
var myKaMap;
window.onload = function() {
myKaMap = new kaMap('mapDiv');
myKaMap.server = 'http://localhost/ka-map/';
myKaMap.initialize();
}
</script>
<!--
Mandatory and optional styles for the map ２５ページ
次のように、styleタグを追加します。地図の表示形式です。
-->
<style type="text/css">
#mapDiv {
position: relative;
height: 200px;
width: 200px;
background-color: white;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>foss4g2007 presentation</h1>
<!--
Add A Map To The Page ２４ページ
次のように、divタグを追加します。ここに地図が挿入されます。
-->
<div id="mapDiv"></div>
</body>
</html>
Try It Out ２７ページ
Webブラウザで表示します。
アドレスバーに次のように入力してください。
http://localhost/ka-map_presen/practice.html
0 件のコメント:
コメントを投稿