HTML5 调用 GPSAPI 获取当前位置的坐标 显示在地图上(有包括百度地图与谷歌地图)
来源:互联网 发布:微商货源源码 编辑:程序博客网 时间:2024/04/30 08:03
HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例,可返回用户位置的经度和纬度
<script>var x=document.getElementById("demo");function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition)
; } else{x.innerHTML="Geolocation is not supported by this browser.";} }function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; }</script>
position.coords.latitude 为获取的纬度position.coords.longitude 为获取的经度
根据获取到的经纬度显示在谷歌地图上:
//对于谷歌地图的API 需要你自己注册账号,才能获取对应的地图API调用
<script type="text/javascript">
$.ajax({
type : "get",
async : false,//同步阻塞加载
cache : false,//不缓存
url : "${estatePrefix}/ip.html",
contentType : "application/json; charset=utf-8",
dataType : "json",
success : function(res) {
if (res == "1") {//中国
document
.write("<script src='http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN'><\/script>");
} else {//国外
document
.write("<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'><\/script>");
}
},
error : function() {
document
.write("<script src='http://ditu.google.cn/maps/api/js?sensor=false&language=zh-CN'><\/script>");
}
});
</script>
<script>
var lon =position.coords.longitude ;var lat =position.coords.latitude ;
function initialize() {
var mapOptions = {
scaleControl : true,
center : new google.maps.LatLng(lat, lon),
zoom : 5
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = '${estatePrefix}/resources/images/marker.png'; //显示当前位置的图标
var marker = new google.maps.Marker({
map : map,
position : map.getCenter(),
icon : image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body onload ="getLocation()">
<p id="demo"></p>
地图显示的位置:<div id="map-canvas"></div>
</body>
- HTML5 调用 GPSAPI 获取当前位置的坐标 显示在地图上(有包括百度地图与谷歌地图)
- html5定位获取当前位置并在百度地图上显示【转】
- 百度地图开发,在地图上显示当前位置
- h5页面调用百度地图获取当前位置并在地图上标注出来
- Html5结合百度地图获取当前位置
- 获取当前位置并利用百度地图显示
- 百度地图api--拖动地图显示经纬度与显示当前位置
- Mui 获取当前位置及在地图上显示
- 微信小程序 实现获取当前位置并在地图上显示
- 通过百度地图API显示当前位置在地图上(图标显示)--第三方开源--百度地图(二)
- 【iOS百度地图系列_1】在地图上定位当前位置
- 百度地图定位 当前位置和地图显示
- 使用百度地图SDK定位当前位置并显示在地图上
- 百度地图获取当前位置坐标,并计算距离
- 从数据库获取到的多个点(有具体的经纬度),显示在百度地图上
- 百度地图Android SDK 2.0开发指南2-结合百度定位SDK在百度地图上显示当前位置
- GPS经纬度及谷歌地图坐标转换为百度地图坐标,解决地图显示经纬度的偏移问题
- 【微信开发】-HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地
- web前端开发分享-css,js深化篇
- 新页面没有链接
- SpringMVC总结(三) Controller类
- Opencv基础知识-----视频的读取和操作
- CF 87E 题解 Mogohu-Rea Idol
- HTML5 调用 GPSAPI 获取当前位置的坐标 显示在地图上(有包括百度地图与谷歌地图)
- Windows 平台下Myeclipse 10 中SVN 插件使用教程(TortoiseSVN)
- 解读cab
- cpluff xml
- maven 配置篇 之pom.xml
- 第十三周项目五:统计每一个字母的个数
- PHP+jQuery模拟一个进程,动态获取长时间运行的进程
- iOS RATreeView 问题总结
- php 获取今天时间戳 时间戳转为时间