<!DOCTYPE html>
<html>
<head runat="server">
<title>Geocoding Test</title>
<script type='text/javascript'
src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js'></script>
<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script src="DynaMarkerIcon.js" type="text/javascript"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
body,input { font-size: 9pt; }
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script>
$(function () {
//計算兩個經緯座標間的距離(Haversine公式)
function distHaversine(p1, p2) {
var rad = function (x) { return x * Math.PI / 180; }
var R = 6371; // earth's mean radius in km
var dLat = rad(p2.lat() - p1.lat());
var dLong = rad(p2.lng() - p1.lng());
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat()))
* Math.sin(dLong / 2) * Math.sin(dLong / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return parseFloat(d.toFixed(3));
}
//消防分局資料陣列
var branches = [];
//取得分局資料(含經緯座標)，存為物作陣列
$.get("AddrList.txt", {}, function (list) {
var lines = list.replace(/\r/g, "").split('\n');
//lines[i]格式如下:
//文山中隊-木柵分隊,(02)29391604,文山區木柵路2段200號,24.9890353,121.5630845
for (var i = 0; i < lines.length; i++) {
var parts = lines[i].split(',');
branches.push({
name: parts[0],
tel: parts[1],
addr: parts[2],
latlng: new google.maps.LatLng(
parseFloat(parts[3]), parseFloat(parts[4])),
dist: 0
});
}
getGeolocation();
});
//取得使用者目前位罝
function getGeolocation() {
if (navigator && navigator.geolocation) {
//getCurrentPosition屬非同步執行，要另定函數解析結果
navigator.geolocation.getCurrentPosition(parsePosition);
}
}
//解析getCurrentPosition傳回的結果
function parsePosition(pos) {
//標示點陣列
var markers = [];
//由pos.coords取出latitude及longitude
var curLatLng = new google.maps.LatLng(
pos.coords.latitude, pos.coords.longitude);
//分別計算對所有Branch的距離
for (var i = 0; i < branches.length; i++) {
var branch = branches[i];
branch.distance = //計算兩個LatLng間的距離
distHaversine(branch.latlng, curLatLng);
}
//依距離進行排序
branches.sort(function (a, b) {
if (a.distance == b.distance) return 0;
return (a.distance > b.distance) ? 1 : -1;
});
//設定地圖參數
var mapOptions = {
center: curLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP //正常2D道路模式
};
//在指定DOM元素中嵌入地圖
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
//使用LatLngBounds統計檢視範圍
var bounds = new google.maps.LatLngBounds();
//加入使用者所在位置
var marker = new google.maps.Marker({
position: curLatLng,
title: "現在位置",
//借用前篇文章介紹的Canvas.toDataURL()產生動態圖檔作為圖示
icon: createMarkerIcon("現在位置"),
map: map
});
var h = [];
//因為已排序過，故會依距離由近到遠加入Marker
for (var i = 0; i < branches.length; i++) {
var b = branches[i];
//距離最近的前五名加入檢視範圍
if (i < 5) bounds.extend(b.latlng);
var marker = new google.maps.Marker({
position: b.latlng,
title: b.name, //以刻有分隊名稱的告示牌作為圖示
icon: createMarkerIcon(b.name.split('-')[1],
//距離較近的前五名為紅底，其餘為暗紅底
{ bgColor: i < 5 ? 'red' : 'darkred' }),
map: map
});
}
//調整檢視範圍
map.fitBounds(bounds);
}
});
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>