「Open Street Map: マップ上にマーカー表示と経度・緯度の取得するには」のコードを使わせて頂いて、OpenStreetMap API 等の勉強をさせて頂いています。
「Open Street Map: マップ上にマーカー表示と経度・緯度の取得するには」のコードを使わせて頂いて、OpenStreetMap API 等の勉強をさせて頂いています。
今日は、マウスクリックで、始点と終点の位置情報を取れる方法を試してみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Open Street Map Test</title>
<style type="text/css">
html,body{ margin: 0px; }
</style>
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
// グーローバル変数の定義
var od;
var des_lonlat;
var arr_lonlat;
</script>
<script>
function MapInit(){
map = new OpenLayers.Map("MapCanvas");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
//var lonLat = new OpenLayers.LonLat(139.47552, 35.59857)
var lonLat = new OpenLayers.LonLat(139.796182, 35.654285)
.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
);
map.setCenter(lonLat, 17);
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
initialize: function(options) {
this.handler = new OpenLayers.Handler.Click(
this, {
'click': this.onClick
}, this.handlerOptions
);
},
onClick: function(e) {
var lonlat = map.getLonLatFromPixel(e.xy);
lonlat.transform(
new OpenLayers.Projection("EPSG:900913"),
new OpenLayers.Projection("EPSG:4326")
);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var marker = new OpenLayers.Marker(
new OpenLayers.LonLat(lonlat.lon, lonlat.lat)
.transform(
new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")
)
);
markers.addMarker(marker);
$("#LonLat").html("lon:" +lonlat.lon+ " lat:" +lonlat.lat);
if (od == "arrival"){
arr_lonlat = lonlat;
alert("arr_lonlatが設定されました" + arr_lonlat.lon +" " + arr_lonlat.lat);
} else if (od == "destination"){
des_lonlat = lonlat;
alert("des_lonlatが設定されました" + des_lonlat.lon +" " + des_lonlat.lat);
}
}
});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#button01").on('click', function () {
od = "destination";
alert(od + " ボタン1がクリックされました。");
});
$("#button02").on('click', function () {
od = "arrival";
alert(od + " ボタン2がクリックされました。");
});
$("#button03").on('click', function () {
od = "confirmed"
alert(od + " ボタン3がクリックされました。");
//
});
})
</script>
</head>
<body>
<div id="MapCanvas" style="width:700px;height:700px;"></div>
<div id="LonLat"></div>
<input id="button01" type="button" value="Button1"/>
<input id="button02" type="button" value="Button2" />
<input id="button03" type="button" value="Button3" />
<script type="text/javascript">MapInit();</script>
</body>
</html>