function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError)
}else{
alert("浏览器不支持地理定位。")
}
}
上面的代码可以知道,如果用户设备支持地理定位,则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象,getCurrentPosition() 方法的第二个参数showError用于处理错误,它规定当获取用户位置失败时运行的函数。
我们先来看函数showError(),它规定获取用户地理位置失败时的一些错误代码处理方式:
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位")
break
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用")
break
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时")
break
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效")
break
}
}
我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。
function showPosition(position){
var lat = position.coords.latitude//纬度
var lag = position.coords.longitude//经度
alert('纬度:'+lat+',经度:'+lag)
}
利用百度地图和谷歌地图接口获取用户地址
上面我们了解了HTML5的Geolocation可以获取用户的经纬度,那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口,我们只需要将HTML5获取到的经纬度信息传给地图接口,则会返回用户所在的地理位置,包括省市区信息,甚至有街道、门牌号等详细的地理位置信息。
我们首先在页面定义要展示地理位置的div,分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互,我们将经纬度信息通过Ajax方式发送给百度地图接口,接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据,我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库,需要先加载jQuery库文件。
coords 中的值只能是数字,你的问题可以用 JavaScript 来解决页面加载的时候,用 JavaScript 获取图片的尺寸,例如 500 * 300,当图片尺寸发生改变的时候再获取一次,例如 400 * 240,获取比例,400 / 500 = 0.8。然后使用 JavaScript 重新设定 coords
284 * 0.8
419 * 0.8
46 * 0.8
html5实现地图上定位导航路线方法如下:
1.先通过百度拾取坐标系统获得点位的坐标。
http://api.map.baidu.com/lbsapi/getpoint/index.html
2.在网页的<head>中插入百度API引用脚本。
<script type="text/javascript" src="http://api.map.baidu.com/api
key=&v=1.1&services=true"></script>
3.在网页的</body>之后</html>之前插入地图显示代码。
4.设置显示地图的div的id为“dituContent”,即添加 id="dituContent"
由于jqm的div的高度都是根据内容自由放大的,所以为了地图能正常显示,还需要
增加一个高度值,一般情况600px就可以,完成。