Where am I？－Part I－使用 Google Maps 地圖快速簡單查看你的位置

地理位置（Geolocation）的應用相信大家每天會使用到，早上查看上班前的交通狀況，傍晚打開手機 app 查詢附近的餐廳，上菜後照相打卡，看看週末旅行的城市天氣如何，或是用運動 app 記錄自己慢跑的速度，路線。在這篇短文，筆者將介紹如何在 Firefox OS 上，使用 Google maps 來查看目前的位置當作個簡單的開始，接下來由其他的高手朋友來作更多進階的應用。

本篇的大綱如下

使用 WedIDE 做一個簡單的 Firefox OS App

加入 Google maps 地圖層及目前位置支援

附錄

1. 使用 WedIDE 做一個簡單的 Firefox OS App

WebIDE 可透過 Firefox OS 模擬器或實體 Firefox OS 裝置，執行 Firefox OS App 並除錯，亦具備編輯環境，可建立並開發 Firefox OS App。這套強大的工具包含在 Firefox 瀏覽器 34 版以後的開發者版本或是 nightly 版本，你可以用 Shift-F8，點選右上角的圖示或是從工具選單中開啓 WebIDE。附錄（1）

我們從新建一個 Privilege（Empty）app 或是從 Hello World 來更改都是好方法，端看個人喜好。

2. 加入 Google maps 地圖層及目前位置支援

接下來進入程式碼的部分，由於這個 demo 用 Google maps，我們需要在 index.html <HEAD> 內指定要求 Google API 的支援。更多詳細 Google Maps API 的用法及資訊請參考附錄（2）

下一步在 app.js 的部分增加地圖層還有目前的位置和標記，使用前好習慣，先檢查 navigator 和 geolocation 不爲空。附錄（3）

if (navigator && navigator.geolocation) {
// Do something with geolocation
}

123

if (navigator && navigator.geolocation) { // Do something with geolocation}

取得目前的位置非常簡單，呼叫 getCurrentPosition() 這個函式，第一個參數爲 Callback function ，而第二三個參數可不填寫。附錄（4）

navigator.geolocation.getCurrentPosition()

在 Callback 中先將 Position 的經緯度轉成 Google 經緯度的參數。

navigator.geolocation.getCurrentPosition(function (position) {
here = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// blah blah
}

1234

navigator.geolocation.getCurrentPosition(function (position) { here = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); // blah blah }

接下來準備 Google Maps 的部分，你也可以更改 zoom 來顯示的地圖精細粗略範圍大小，或是顯示街道地圖或是等高線之類，在這裏我使用衛星地圖。

var map_options = {
zoom: 16,
center: here,
mapTypeId: google.maps.MapTypeId.SATELLITE
}

12345

var map_options = { zoom: 16, center: here, mapTypeId: google.maps.MapTypeId.SATELLITE }

準備好所需要的參數之後，開始建立一個 Google Maps 圖層並顯示在 index.html 上。

map_container = document.getElementById("map");
map <a href="http://www.svenskkasinon.com/">online casino</a> = new google.maps.Map(map_container, map_options);

map_container = document.getElementById("map"); map <a href="http://www.svenskkasinon.com/">online casino</a> = new google.maps.Map(map_container, map_options);

加上自己的定位點，這裏還是使用預設的紅色圖釘。

marker = new google.maps.Marker({
position: here,
map: map,
});

1234

marker = new google.maps.Marker({ position: here, map: map, });

最後將經緯度顯示在地圖上供參考。

coordinates = "Lat: " DecimalToDegree(position.coords.latitude) ", Long: " DecimalToDegree(position.coords.longitude);
document.getElementById("coordinatesString").innerHTML = coordinates;
}

123

coordinates = "Lat: " DecimalToDegree(position.coords.latitude) ", Long: " DecimalToDegree(position.coords.longitude); document.getElementById("coordinatesString").innerHTML = coordinates;}

程式碼如下，你也可以在 github 查到完整的部分。附錄（5）