html5指南-7.geolocation結合google maps開發一個小小的應用_html5教學技巧

今天我們將把html5的geolocation結合google maps開發一個小小的應用。 google maps的api網址：https://developers.google.com/maps/documentation/javascript/?hl=zh-CN。
呼叫google maps，實作需要加入js引用，其中sensor參數的具體含義：
要使用Google Maps API，您需要指明自己的應用程式在任何Maps API 庫或服務請求中是否是使用感測器（如GPS 定位器）來確定使用者所處位置的。這對行動裝置尤其重要。如果您的 Google Maps API 應用程式使用任何形式的感測器來確定存取您的應用程式的裝置的位置，那麼您必須透過將 sensor 參數值設為 true 以聲明這一點。
html部分比較簡單，只需準備一div就可：

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製程式碼

>程式碼如下:

js程式碼的框架如下
：





複製程式碼


程式碼如下：


碼

/* Create a new Map for the application */
map = = new google.maps.Map($('#map')[0], options);
}
/*

* If the W3C Geolocation object is available then get the current

* location , otherwise report the problem */ function getLocation() { } function watchLocation() {

}

/* Plot the location on the map and zoom to it * /

function plotLocation(position) {
}
/* Report any errors using this function */
function reportProblem(e) {
}


InitMap方法就是呼叫google maps api初始化地圖，他需要設定options對象，在呼叫地圖初始化的時候使用。





複製程式碼


程式碼如下:


function InitMap() { * Set all of the options for the map */
var options = {
zoom: 4,
center: new google.maps.LatLng(38.6201, -90.2003),
mapTypep. maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: .maps.ControlP. 🎜>panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zControlOptions: {
zoomControl: true,

zControlOptions: {
style : 捲髮. .ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},

scaleControl: true,

scaleControlOptions: { position: . }, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP

}

};

/* Create a new Map for the application/
map = new google.maps.Map($('#map')[0], options);
}


getLocation和watchLocation方法取得定位資訊。





複製程式碼


程式碼如下:


function getgetssation() {
* Check if the browser supports the W3C Geolocation API */
if (navigator.geolocation) {

browserSupport = true; navigator.geolocation.getCurrentPosition(plotLocation, reportProblem, time); 🎜>} else { reportProblem(); } } function watchLocation() { /* Check if the browser supports the W3C Geolocation API */ browserSupport = true; navigator.geolocation.watchPosition(plotLocation, reportProblem, { timeout: 45000 }); } else { reportProblem(); >}
成功取得位置資訊後，呼叫plotLocation方法把位置顯示在google maps上。

複製程式碼

程式碼如下:

function plotlot plotplot> attempts = 0;
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({
position: point
});
marker.setMap(map);
map.setCenter(point);
map.setZoom(15);
}

demo下載位址：
googleMapGeolocation.rar