分類  >  Web前端 >

Googlemap準確定位

tags:    時間:2013-12-10 00:02:23
Google地圖準確定位

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<title>GIS開發利用html5獲取經緯度並在google地圖中查看</title>

<!--載入google map api-->

<script type="text/javascript"

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCefZle2DqxF9i51PTfoZsZoOmvWzKYhF4&sensor=true">

</script>

</head>

 

<body>

<span id="support">將下面的經緯度輸入谷歌地圖:</span>

<div id="show">

緯度:<span id="latitude"></span><br />

經度:<span id="longitude"></span><br />

準確度:<span id="accuracy"></span>

</div>

<script type="text/javascript">

var doc = document,

    latitude = doc.getElementById('latitude'),

    longitude = doc.getElementById('longitude'),

    accuracy = doc.getElementById('accuracy'),

    support = doc.getElementById('support'),

    showDiv = doc.getElementById('show');

function lodeSupport(){

    if(navigator.geolocation){

        support.innerHTML = '將下面的經緯度輸入谷歌地圖(緯度 經度)查看自己位置:';

        showDiv.style.display = 'block';

        navigator.geolocation.getCurrentPosition(updataPosition);

    }else{

        support.innerHTML = '對不起,瀏覽器不支持!';

        showDiv.style.display = 'none';

    }

}

function updataPosition(position){

    var latitudeP = position.coords.latitude,

        longitudeP = position.coords.longitude,

        accuracyP = position.coords.accuracy;

    latitude.innerHTML = latitudeP;

    longitude.innerHTML = longitudeP;

    accuracy.innerHTML = accuracyP;

//在google map中顯示地址

 

var myLatlng=new google.maps.LatLng(latitudeP, longitudeP);

var mapOptions = {

 center: myLatlng,

 zoom: 13,

 mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"),

mapOptions);

 

var marker = new google.maps.Marker({

position: myLatlng,

title:"小編的地址"

});

 

//將標記顯示在地圖中

marker.setMap(map);

 

 

}

window.addEventListener('load', lodeSupport , true);

</script>

<div id="map_canvas" style="width:500px; height:500px;"></div>

</body>

</html>

 

 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網