html5实现地图上定位导航路线

html5实现地图上定位导航路线,第1张

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就可以,完成。

在支持html5地理定位API的浏览器上,window.navigator对象新增了一个geolocation属性,以及相关的Geolocation API。都是用JS进行访问的。

下面是一个例子:

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>地理位置</title>

</head>

<body>

<script>

navigator.geolocation.getCurrentPosition(

function(position){

var cords = position.coords

alert("当前经度:"+cords.longtitude +", 纬度:"+cords.latitude)

},

function(error){

var errorTypes={1:"位置服务被拒绝", 2:"获取不到位置信息", 3:"获取位置信息超时"}

alert( errorTypes[error.code] +":,不能确定当前地理位置")

}

)

</script>

</body>

</html>

这只是一个例子,一般用经度和纬度调用地图如百度地图的API显示。

注意:在电脑本机上没法测试,一般把网页放到服务器上,用手机访问可以定位。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7058029.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存