XML Overlays Drawing Points ４１ページ
地図上に点を描きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>XMLOverlay Point sample - ka-Map!</title>
<!--
自分の環境に合わせて src="" の指定を修正してください。
-->
<script type="text/javascript" src="http://localhost/ka-map/DHTMLapi.js"></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>
<script type="text/javascript" src="http://localhost/ka-map/wz_dragdrop.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaZoomer.js"></script>
<!-- added for XMLOverlay -->
<script type="text/javascript" src="http://localhost/ka-map/excanvas.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_jsgraphics.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/XMLOverlay/kaXmlOverlay.js"></script>
<!-- end added for XMLOverlay -->
<!-- 地図の描画部分。 -->
<script type="text/javascript">
var myKaMap = null;
SET_DHTML();
function myOnLoad()
{
initDHTMLAPI();
myKaMap = new kaMap( 'viewport' );
//自分の環境に合わせて変更してください
myKaMap.server = 'http://localhost/ka-map/';
myKaMap.registerForEvent( KAMAP_MAP_INITIALIZED, null, mapInitialized );
//kaNavigatorのkaZoomerを設定しています。
var kaNav = new kaNavigator( myKaMap );
kaNav.activate();
myKaZoomer = new kaZoomer(myKaMap);
drawPage();
myKaMap.initialize('worldata');
}
//ブラウザのサイズに合わせて地図のサイズを決めています。
function drawPage()
{
var browserWidth = getInsideWindowWidth();
var browserHeight = getInsideWindowHeight();
var viewport = getRawObject('viewport');
viewport.style.width = browserWidth + "px";
viewport.style.height = browserHeight + "px";
myKaMap.resize();
}
//点を描く関数を呼び出しています。
function mapInitialized( eventID, mapName )
{
printMyOverlay();
}
</script>
<script type="text/javascript">
/*
* ADDED PART OF CODE FOR OBJECT OVERLAY EXAMPLE
*/
//my point array
var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat');
aPoints[1] = new Array(41.23,2.11,'Barcelona');
aPoints[2] = new Array(48.52,2.19,'Paris');
aPoints[3] = new Array(41.53,12.29,'Rome');
aPoints[4] = new Array(43.47,11.15,'Florence');
aPoints[5] = new Array(41.11,29.08,'Istanbul');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo');
aPoints[7] = new Array(46.31,6.38,'Lausanne');
var myOverlay;
//点を描く関数
function printMyOverlay () {
myOverlay = new kaXmlOverlay( myKaMap, 300 );//z-index
myOverlay.handler_onclick = myPointClicked;
myOverlay.collision = true;//重なったとき間引き
myOverlay.col_size = 30;
var line =null;
var i;
//上記のpoint arrayを順番に読み込んでいます。
for(i=0;i<aPoints.length;i++){
var latitude = aPoints[i][0];
var longuitude = aPoints[i][1];
var pointId = i;
var my_point = myOverlay.addNewPoint(pointId, longuitude, latitude);
var my_symbol = new kaXmlSymbol();
my_symbol.size = 12;
my_symbol.color = '#ff0000';
my_point.addGraphic(my_symbol);
}
myOverlay.resetCollisionPoints();
}
//ポインタをクリックしたときに実行される関数
function myPointClicked(p){
alert(p.pid);
}
//ポインタが重なったときに実行される関数
function myPointOver(t){
alert(t + " over");
}
var myXmlOverlay;
function ovrFromXml( ovr ) {
if (ovr) {
myXmlOverlay = new kaXmlOverlay( myKaMap, 250 );
myXmlOverlay.handler_onclick = myPointClicked;
myXmlOverlay.loadXml(ovr);
}
}
/*
* END OF ADDED CODE
*/
</script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-color: #d9d9d9;
overflow: hidden;
}
#viewport {
position: relative;
width: 100%;
height: 100%;
background-color: #f0f0f0;
overflow: hidden;
border: 1px solid #000000;
cursor: move;
-moz-box-sizing: border-box;
}
</style>
</head>
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport"> </div>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿