使用 Google Maps API

在地理資訊系統的相關應用實作上,HTML5 可以可以直接取出地理位置的經緯度坐標,搭配 Google 提供的 Maps API ,便能進一步建立視覺化的地圖網頁,並將目前位置的經緯度在地圖上的相對位置標示出來。最簡單的 Google Maps API 應用是在網頁上呈現某個特定區域的靜態地圖,例如:


以上所呈現的是台北 101 附近的地圖,我們只需要配置一個 div 元素來呈現地圖內容,將其命名為 map_canvas ,並撰寫如下的程式碼即可得到此效果:

var latlng = new google.maps.LatLng(25.034439, 121.564064);
var myOptions = {
   zoom: 14,
   center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
    document.getElementById("map_canvas"),myOptions);

其中的25.034439, 121.564064是 101 附近的地理座標,你可以換成自訂的地理位置,另外記得預先戴入所需的 JavaScript 如下:

<script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false">



沒有留言: