이번에는 두 지점간 거리를 계산해 보겠습니다.
거리를 구해주는 API가 분명히 있을것 같은데, 도저히 찾지를 못해 직접 계산해버렸습니다.
(거리 구하는 API 를 아시는 분은 알려주시면 감사하겠습니다)
예제보기
//Global Variables
var lat1="", lon1="", lat2="", lon2="";
var map;
var lmarker, rmarker;
function calcDistance(lat1, lon1, lat2, lon2){
var EARTH_R, Rad, radLat1, radLat2, radDist;
var distance, ret;
EARTH_R = 6371000.0;
Rad = Math.PI/180;
radLat1 = Rad * lat1;
radLat2 = Rad * lat2;
radDist = Rad * (lon1 - lon2);
distance = Math.sin(radLat1) * Math.sin(radLat2);
distance = distance + Math.cos(radLat1) * Math.cos(radLat2) * Math.cos(radDist);
ret = EARTH_R * Math.acos(distance);
return Math.round(Math.round(ret) / 1000);
}
function load() {
if (GBrowserIsCompatible()) {
var mapOptions = {
googleBarOptions : {
style : "new"
}
}
map = new GMap2(document.getElementById("map_canvas"), mapOptions);
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.566079, 126.980495), 5);
map.setUIToDefault();
map.enableGoogleBar();
GEvent.addListener(map, "click", function(overlay,point) {
if (point) {
lat1 = point.lat().toFixed(6);
lon1 = point.lng().toFixed(6);
lmarker = new GMarker(point);
map.addOverlay(lmarker);
lmarker.setImage("http://maps.google.com/mapfiles/ms/icons/red-pushpin.png");
}
});
//right click event로 넘어오는 point는 브라우저상의 pixel이므로 위/경도로 변환해야 함.
GEvent.addListener(map, "singlerightclick", function(point, src, overlay){
if(lat1.length == 0 || lon1.length == 0){
window.alert("Select Origin Point first");
return;
}
if(point){
var geo_pt = map.fromContainerPixelToLatLng(point);
lat2 = geo_pt.lat();
lon2 = geo_pt.lng();
rmarker = new GMarker(geo_pt);
map.addOverlay(rmarker);
rmarker.setImage("http://maps.google.com/mapfiles/ms/icons/purple-pushpin.png");
//Draw Poly Line
var base = new GLatLng(lat1, lon1);
var polyOptions = {geodesic:true};
var polyline = new GPolyline([base, geo_pt], "#ff0000", 5, 1, polyOptions);
map.addOverlay(polyline);
//Calculate distance
var dist = calcDistance(lat1, lon1, lat2, lon2);
var myHtml = "<H3>Disatnce is " + dist + " Km</H3>";
map.openInfoWindow(geo_pt, myHtml);
GEvent.addListener(rmarker, "mouseover", function(){
map.openInfoWindow(geo_pt, myHtml);
});
delete base;
}
});
}
}
lat1, lon1, lat2, lon2, map, lmarker, rmarker를 프로그램 편의상 전역변수로 뺐습니다.
그리고 거리 계산하는 함수 calcDistance 가 추가되었습니다.
맵상에서 좌측 클릭한 좌표를 lat1, lon1에 저장하고, 우측 클릭한 좌표를 lat2, lon2에 저장한 다음 거리를 계산합니다.
그리고 파란색 마커(rmarker)에 마우스를 올리면(mouseover) 두 지점간 거리를 풍선 도움말로 표시하게 했습니다.
거리를 구해주는 API가 분명히 있을것 같은데, 도저히 찾지를 못해 직접 계산해버렸습니다.
(거리 구하는 API 를 아시는 분은 알려주시면 감사하겠습니다)
예제보기
//Global Variables
var lat1="", lon1="", lat2="", lon2="";
var map;
var lmarker, rmarker;
function calcDistance(lat1, lon1, lat2, lon2){
var EARTH_R, Rad, radLat1, radLat2, radDist;
var distance, ret;
EARTH_R = 6371000.0;
Rad = Math.PI/180;
radLat1 = Rad * lat1;
radLat2 = Rad * lat2;
radDist = Rad * (lon1 - lon2);
distance = Math.sin(radLat1) * Math.sin(radLat2);
distance = distance + Math.cos(radLat1) * Math.cos(radLat2) * Math.cos(radDist);
ret = EARTH_R * Math.acos(distance);
return Math.round(Math.round(ret) / 1000);
}
function load() {
if (GBrowserIsCompatible()) {
var mapOptions = {
googleBarOptions : {
style : "new"
}
}
map = new GMap2(document.getElementById("map_canvas"), mapOptions);
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.566079, 126.980495), 5);
map.setUIToDefault();
map.enableGoogleBar();
GEvent.addListener(map, "click", function(overlay,point) {
if (point) {
lat1 = point.lat().toFixed(6);
lon1 = point.lng().toFixed(6);
lmarker = new GMarker(point);
map.addOverlay(lmarker);
lmarker.setImage("http://maps.google.com/mapfiles/ms/icons/red-pushpin.png");
}
});
//right click event로 넘어오는 point는 브라우저상의 pixel이므로 위/경도로 변환해야 함.
GEvent.addListener(map, "singlerightclick", function(point, src, overlay){
if(lat1.length == 0 || lon1.length == 0){
window.alert("Select Origin Point first");
return;
}
if(point){
var geo_pt = map.fromContainerPixelToLatLng(point);
lat2 = geo_pt.lat();
lon2 = geo_pt.lng();
rmarker = new GMarker(geo_pt);
map.addOverlay(rmarker);
rmarker.setImage("http://maps.google.com/mapfiles/ms/icons/purple-pushpin.png");
//Draw Poly Line
var base = new GLatLng(lat1, lon1);
var polyOptions = {geodesic:true};
var polyline = new GPolyline([base, geo_pt], "#ff0000", 5, 1, polyOptions);
map.addOverlay(polyline);
//Calculate distance
var dist = calcDistance(lat1, lon1, lat2, lon2);
var myHtml = "<H3>Disatnce is " + dist + " Km</H3>";
map.openInfoWindow(geo_pt, myHtml);
GEvent.addListener(rmarker, "mouseover", function(){
map.openInfoWindow(geo_pt, myHtml);
});
delete base;
}
});
}
}
lat1, lon1, lat2, lon2, map, lmarker, rmarker를 프로그램 편의상 전역변수로 뺐습니다.
그리고 거리 계산하는 함수 calcDistance 가 추가되었습니다.
맵상에서 좌측 클릭한 좌표를 lat1, lon1에 저장하고, 우측 클릭한 좌표를 lat2, lon2에 저장한 다음 거리를 계산합니다.
그리고 파란색 마커(rmarker)에 마우스를 올리면(mouseover) 두 지점간 거리를 풍선 도움말로 표시하게 했습니다.