通过geolocation在google地图上显示你的地理位置

我们知道,通过html5中的geolocation可以很简单的获取当前用户的地理信息,现在我们就通过html5获取用户的信息,并且展示在google的地图上,这个也算是geolocation的一个简单的应用。

输入代码:

—————————————————————————————————————–

<!DOCTYPE HTML>
<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0,user-scalable”/>
<meta charset=”UTF-8″/>
<title>在google地图上显示你的位子</title>
<script type=”text/javascript” src=http://maps.google.com/maps/api/js?sensor=false></script>
<script type=”text/javascript”>
function init(){
//这是获取到地理信息之后的操作
navigator.geolocation.getCurrentPosition(function(position){
//这个对象包含了用户的当前经度和纬度
var coords=position.coords;
//转化为google地图上的经纬度
var latlng=new google.maps.LatLng(coords.latitude,coords.longitude);
//这是在获取google地图时候的参数设置
var myOptions={
zoom:14,//google的放大等级
center:latlng,//google地图的中心
mapTypeId:google.maps.MapTypeId.ROADMAP//这个设置返回的地图的类型
};
//创建地图并且在地图中显示
var map1;
map1=new google.maps.Map(document.getElementById(“map”),myOptions);//两个参数,一个是存div,一个是相关的参数
//在地图上创建标记
var marker=new google.maps.Marker({
position:latlng,//位置是用户的当前位置
map:map1//这个是表示放在哪个地图上
});
//设定标注窗口的文字
var infowindow=new google.maps.InfoWindow({
content:”这是您的当前位置!~”// 这个是包含的内容
});
infowindow.open(map1,marker);//显示
})
}
</script>
</head>

<body onload=”init()”>
<center>
<div id=”map” style=”width:960px;height:600px;background-color:green;”>这个是获取地理信息的演示</div>
</center>
</body>
</html>

——————————————————————————————————————

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/dili3.htm

共有 0 条评论

Top