<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script type="text/javascript">
var map = null;
var latLong = null;
var zoomLevel = 3;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
map.SetZoomLevel(zoomLevel);
// カーソル位置をズームの中心に設定します。
map.SetMouseWheelZoomToCenter(false);
txtZoom.value = zoomLevel;
map.AttachEvent("onclick", GetLatLong);
latLong = map.GetCenter();
divInfo.innerHTML = latLong;
}
function GetLatLong(e)
{
//クリック イベントからピクセル座標を取得し、LatLong 値に変換します。
var x = e.mapX;
var y = e.mapY;
pixel = new VEPixel(x, y);
latLong = map.PixelToLatLong(pixel);
divInfo.innerHTML = latLong;
}
function SetCenterAndZoom()
{
map.SetCenterAndZoom(latLong, zoomLevel);
}
function SetCenter()
{
map.SetCenter(latLong);
}
function SetZoom()
{
map.SetZoomLevel(zoomLevel);
}
function ZoomIn()
{
//ズーム レベルを 1 ずつ増加します。
map.ZoomIn();
txtZoom.value = map.GetZoomLevel();
}
function ZoomOut()
{
//ズーム レベルを 1 ずつ減少します。
map.ZoomOut();
txtZoom.value = map.GetZoomLevel();
}
function ValidateEntry()
{
//ズーム レベルが範囲内であることを確認します。
if (txtZoom.value > 0 && txtZoom.value <= 19)
{
zoomLevel = txtZoom.value;
}
else
{
alert("1 ～ 19 までの値を入力してください。");
}
}
</script>
</head>
<body onload="GetMap();" style="font-family:MS PGothic">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
マップをクリックして中心点を選択してください。<br />
<div id="divInfo"> <br /></div>
ズーム レベル:<input id="txtZoom" type="text" value="" onchange="ValidateEntry()"/><br />
<input id="btnSetCZ" type="button" value="中心点とズーム レベルを設定" onclick="SetCenterAndZoom()"><br />
<input id="btnSetCenter" type="button" value="中心点を設定" onclick="SetCenter()"><br />
<input id="btnSetZoom" type="button" value="ズーム レベルを設定" onclick="SetZoom()"><br />
<input id="btnZoomIn" type="button" value="1 レベル拡大" onclick="ZoomIn()">
<input id="btnZoomOut" type="button" value="1 レベル縮小" onclick="ZoomOut()">
</body>
</html>