HTML5 Geolocation 定位服務實例

時間 2019-11-17

標籤 html5 html geolocation 定位服務實例欄目 HTML5 简体版

原文原文鏈接

本例採用html5 Geolocation 定位服務和 google maps api 3 完成，運行時請確保你的瀏覽器支持 html5.

<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body { height: 100%; margin: 0px; padding: 0px }

#map_canvas { height: 100% }

</style>

src="http://maps.google.com/maps/api/js?v=3.7&sensor=false">

</script>

function initialize(position) {

var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

// position.coords.latitude 經度

// position.coords.longitude 緯度

var myOptions = {

zoom: 18,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementByIdx_x("map_canvas"),myOptions);

var marker = new google.maps.Marker({

position: latlng,

map: map,

title:"你在這裏（精確到" + position.coords.accuracy + "米）"

});

}

function error(msg){

alert(msg);

}

(function(){

if(navigator.geolocation){

navigator.geolocation.getCurrentPosition(initialize,error);

}else{

error("親！很遺憾的告訴您，您的瀏覽器不支持HTML5 請升級版本");

}

})();

</script>

</head>

<body >

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

HTML5 Geolocation 定位服務 實例

HTML5 Geolocation 定位服務實例