<!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 () {
var markers = [];
geocoder = new google.maps.Geocoder();
var c = 0;
//透過Google Geocoder將地址轉為經緯座標
function geocodeAjax(name, addr) {
//利用Deferred物件協助非同步呼叫全部完成的時機
var def = new jQuery.Deferred();
//geocoder似乎有使用量管控，若快速連續呼叫會停止運作
//在此使用setTimeout節流，每次查詢間隔一秒鐘
setTimeout(function() {
//呼叫decode()，傳入參數及Callback函數
geocoder.geocode({ address: addr }, function (results, status) {
//檢查執行結果
if (status == google.maps.GeocoderStatus.OK) {
var loc = results[0].geometry.location;
markers.push({
title: name + "@" + addr,
latlng: new google.maps.LatLng(loc.lat(), loc.lng())
});
//呼叫Deferred.resolve()，表示執行成功
def.resolve();
}
else
{
//呼叫Deferred.reject()，表示執行失敗
def.reject();
}
});
}, c++ * 1000);
//傳回Promise物件，以協調非同步呼叫結果
return def.promise();
}
$.get("AddrList.txt", {}, function (list) {
var lines = list.replace(/\r/g, "").split('\n');
var deferredArray = [];
//lines[i]格式如下:
//中正中隊-華山分隊,(02)23412668,中正區北平東路1號
for (var i = 0; i < lines.length; i++) {
var parts = lines[i].split(',');
//以AJAX進行地址轉換，並將$.ajax() deferred物件放入陣列中
deferredArray.push(geocodeAjax(parts[0], parts[2], lines[i]));
}
//利用Deferred特性，在所有地址轉換呼叫完畢後，繪製地圖
$.when.apply(null, deferredArray).then(function () {
//設定地圖參數
var mapOptions = {
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();
//加入標示點(Marker)
for (var i = 0; i < markers.length; i++) {
var m = markers[i];
//將此座標納入檢視範圍
bounds.extend(m.latlng);
var marker = new google.maps.Marker({
position: m.latlng,
title: m.title,
map: map
});
}
//調整檢視範圍
map.fitBounds(bounds);
});
});
});
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>