最新消息:欢迎大家来到小月博客

JS 百度地图导航

web前端 小月 1921浏览 0评论

JS 百度地图导航

 

上一篇文章中我们就简单的学习了HTML5 地理定位,那么今天告诉大家我在项目中遇到的一个问题吧,就是怎么实现点击一个按钮就可以调到百度地图,并且获取到你当前的位置,并且导航到指定的地方去。

一、获取目的地坐标

打开百度地图API 鼠标点击拾取坐标网页,http://api.map.baidu.com/lbsapi/getpoint/index.html,通过先缩小再放大,定位到拾取坐标的建筑物。

以北京的朝阳公园为例,定位如下:

map01

鼠标点击的位置就是朝阳公园的坐标:

116.488543, 39.949804  //这分别表示经度和纬度。

二、百度地图公交、驾车、步行导航

导航接口为 :

  • http://api.map.baidu.com/direction //PC&Webapp服务地址

具体的参数问题请看API:

  • http://developer.baidu.com/map/wiki/index.php?title=uri/api/web

示例

http://api.map.baidu.com/direction?origin=latlng:34.264642646862,108.95108518068|name:我家&destination=大雁塔&mode=driving&region=西安&output=html&src=yourCompanyName|yourAppName

//调起百度PC或Web地图,展示”西安市”从(lat:34.264642646862,lng:108.95108518068 )”我家”到”大雁塔”的驾车
路线。

我在项目中要做的是获取当前的位置,然后导航到指定的项目如下:

<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;
        window.location.href="http://api.map.baidu.com/direction?origin=latlng:"+position.coords.latitude+","+position.coords.longitude+"|name:我家&destination=侨鑫汇悦台&mode=driving&region=广州&output=html&src=yourCompanyName|yourAppName";
    }
 </script>

很显然我们实现的就是两个步骤

  1. getLocation() —> JS 利用html5 地理定位功能,获取当前的经纬度
  2. showPosition()—>根据经纬度和百度API 拼接成自己的URL

实现的效果如图所示

未标题-1

这个就是可以在移动端或者PC都可以实现的导航到指定位置的功能。

PS: 其实这个功能比较简单,百度的API可以实现的功能很强大,有兴趣的伙伴可以自己去研究一下。需要demo加QQ自己下载吧,祝学习愉快。

很多小伙伴找我要demo,今天正好有时间我就稍微的整理了一下。(ps:我一直是很懒的。)需要的自己下载吧! 移动端的需要部署到自己的服务器上看的哦!


转载请注明:小月博客 » JS 百度地图导航

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. 习惯了高德
    米粒博客11个月前 (03-08)回复
    • 高德的API我还没有看过,我们项目用的都是百度的
      小月11个月前 (03-09)回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册