在移动端上用GIS开发利用html5获取经纬度并在google地图中查看

最新推荐文章于 2024-03-24 10:51:10 发布

百世沉浮

最新推荐文章于 2024-03-24 10:51:10 发布

阅读量1.3k

点赞数

分类专栏：代码规范文章标签：谷歌地图 gis html5 定位

代码同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

规范

10 篇文章 0 订阅

订阅专栏

<!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://ditu.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>

百世沉浮

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
在移动端上用GIS开发利用html5获取经纬度并在google地图中查看

GIS开发利用html5获取经纬度并在google地图中查看在移动端上用<script type="text/javascript"src="http://ditu.googleapis.com/maps/api/js?key=AIzaSyCefZle2DqxF9i51PTfoZsZoOmvWzKYhF4&sensor=true">将下面的经纬度输入谷歌地图：纬度：经度：准
复制链接

扫一扫