要在網頁中顯示一張 Google 地圖, 首先需匯入 Google Maps API :
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
這裡 sensor=false 表示此為一般電腦, 不是行動裝置, 不使用感應器.
其次, 必須在網頁中放置一個 DIV 元素當作畫布, 並指定畫布大小 :
<div id="canvas" style="width:500px; height:400px"></div>
為了以 Javascript 操控地圖的繪製, 必須給予獨一的 id, 此處我們使用 jQuery 來操作畫布元素.
var canvas=$("#canvas")[0];
注意, $("#canvas") 所取得的是畫布的 jQuery 包裹物件, 必須呼叫 get() 或用陣列元素 0 取得其 DOM 物件才能為 Google Maps API 所用.
要繪製谷歌地圖必須先建立地圖中心點的座標物件與地圖物件. 首先傳入緯度與經度給 Goolge Maps API 的 LatLng() 方法來建立座標物件 :
var latlng=new google.maps.LatLng(22.66, 120.35);
這裡傳入的參數是高雄澄清湖中心的經緯度 : 北緯 22 度 66 秒, 東經 120 度 35 秒. 第一個參數為緯度, 第二個參數為經度.
其次是呼叫 Goolge Maps API 的 Map() 方法建立地圖物件, 此方法須傳入網頁中的畫布物件, 以及一個選項物件當參數 :
var opt={zoom:14, center:latlng, mapTypeId:"roadmap"};
這個選項物件實體主要指定了地圖的放大倍數 zoom 為 14 倍, 中心點座標 center 為所建立之座標物件, 以及地圖類型為道路地圖 "roadmap" (API 中定義了一個字串常數 google.maps.MapTypeId.ROADMAP, 事實上其值為一個字串 "roadmap", 即道路地圖).
這樣就可以呼叫 Map() 方法建立地圖物件了 :
var map=new google.maps.Map(canvas, opt);
最後, 將座標物件與地圖物件傳給 Marker() 方法就會繪製地圖了 :
var marker=new google.maps.Marker({position:latlng, map:map});
範例 1 : http://tony1966.xyz/test/GoogleMaps/gmaps-1.htm [看原始碼]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps 測試</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="canvas" style="width:500px; height:400px"></div>
<script>
$(document).ready(function(){
var canvas=$("#canvas")[0];
var latlng=new google.maps.LatLng(22.66, 120.35);
var opt={zoom:14, center:latlng, mapTypeId:"roadmap"};
var map=new google.maps.Map(canvas, opt);
var marker=new google.maps.Marker({position:latlng, map:map});
});
</script>
</body>
</html>
道路圖
上面選項物件中的 mapTypeId 屬性除了 "roadmap" (道路圖) 外, 還可以設為 "terrain" (地形圖), 以及 "satellite" (衛星圖), 如下範例 2 與 3 所示 :
範例 2 : http://tony1966.xyz/test/GoogleMaps/gmaps-2.htm [看原始碼]
範例 3 : http://tony1966.xyz/test/GoogleMaps/gmaps-3.htm [看原始碼]
地形圖
衛星圖
看起來地形圖似乎與道路圖沒差多少, 因為這區域都是平地, 沒甚麼山丘之故.
如果要顯示指定經緯度之地圖, 可利用 jQuery UI 的 Slider 來做, 如下範例 4 所示 :
測試 4 : http://tony1966.xyz/test/GoogleMaps/gmaps-4.htm [看原始碼]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps 測試</title>
<link href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false&language=zh-TW"></script>
<style>
body {font:90% sans-serif;margin:10px;}
</style>
</head>
<body>
<div>
<label for="lat_value">緯度 : </label>
<input type="text" id="lat_value" readonly style="border:0;color:red;">
</div>
<div id="lat_slider" style="width:500px;"></div>
<div>
<label for="lon_value">經度 : </label>
<input type="text" id="lon_value" readonly style="border:0;color:red;">
</div>
<div id="lon_slider" style="width:500px;"></div><br>
<div id="canvas" style="width:500px; height:400px"></div>
<script>
$(document).ready(function(){
var lat=22.66;
var lon=120.35;
var zoom=5;
var canvas=$("#canvas")[0];
//繪製地圖之預設區域
var latlng=new google.maps.LatLng(lat, lon);
var opt={zoom:zoom, center:latlng, mapTypeId:"roadmap"};
var map=new google.maps.Map(canvas, opt);
var marker=new google.maps.Marker({position:latlng, map:map});
$("#lat_slider").slider({
orientation:"horizontal",
range:"min",
min:-90,
max:90,
value:22.66,
slide:function(e,ui){
$("#lat_value").val(ui.value);
var latlng=new google.maps.LatLng(ui.value, lon);
var opt={zoom:zoom, center:latlng, mapTypeId:"roadmap"};
var map=new google.maps.Map(canvas, opt);
var marker=new google.maps.Marker({position:latlng, map:map});
}
});
$("#lon_slider").slider({
orientation:"horizontal",
range:"min",
min:-180,
max:180,
value:120.35,
slide:function(e,ui){
$("#lon_value").val(ui.value);
var latlng=new google.maps.LatLng(lat, ui.value);
var opt={zoom:zoom, center:latlng, mapTypeId:"roadmap"};
var map=new google.maps.Map(canvas, opt);
var marker=new google.maps.Marker({position:latlng, map:map});
}
});
});
</script>
</body>
</html>
這裡我們加上 id 為 lat_slider 的緯度滑桿, 其範圍為 -90 (南緯) ~ 90 (北緯), 以及 id 為 lon_slider 的經度滑桿, 其範圍為 -180 (西經) ~ 180 (東經), 預設值為澄清湖中心經緯度. 同時設定滑桿的 slide 事件處理函式, 當滑動事件發生時, 會在第二參數傳回滑桿物件 ui, 其 value 屬性即為當時滑桿之值, 可傳入 LatLng() 方法中產生新的座標物件, 重新繪製地圖.
特別注意範例 4 的 Google Maps API 字串多了個 language 參數 :
https://maps.google.com/maps/api/js?sensor=false&language=zh-TW
這是因為我發現沒加這個參數的話, Google Maps 預設是使用醜斃的簡體中文來顯示地名 (我一直都認為, 當初促成簡體中文誕生的一票渾蛋們, 死後都無臉面見數千年祖宗於地下).
參考 :
# Google Maps API - 地圖座標定位
# Google Maps API 的語言設定
2 則留言 :
請教一下....那要如何將定位資料,回傳sql資料庫???
您是指最後找到的經緯度要傳回伺服器嗎?
張貼留言