今天因為時間關係,實在沒有辦法講得很詳細,請容我簡略帶過XD。
今天想帶來的是如何去定位你目前的位置(正確來說是你連上網路的主機的位置),
我們先來看整體的程式碼:
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
這邊先定義了一下地圖的中心位置,初始地圖啟動的時候就會看到以這個座標點為中心。
infoWindow = new google.maps.InfoWindow;
這是產生資訊視窗的方法,也可以和 Marker 連動,
像是我們點擊一些地點或店家會跳出來的視窗,配合infoWindow.open(map);
產生打開的效果
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
這邊先寫下前半段的判斷式,navigator.geolocation.getCurrentPosition(function(position)
這個方法可以去抓取使用者現在的位置,並命一個變數 pos,來存取該位置的經緯度。
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
這邊寫下資訊視窗要啟動的地點(pos的經緯度),infoWindow.setContent
設定資訊視窗想要 show 的內容map.setCenter(pos)
將地圖中心改為 pos所在的經緯度。
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
這邊定義了一個 function hadleLocationError
裡面塞了三個參數:判斷瀏覽器是否支援 Geolocation、資訊視窗、pos 經緯度
並且設定了如果 browserHasGeolocation 得到的結果是 false
那就會有 'Error: The Geolocation service failed.'
的訊息產生在資訊視窗上。
以上,大概就是今天想講的關於定位的部分,
希望有幫助到有需要的同好~