JS 百度地图导航

时间 2019-12-12

标签百度地图导航栏目 JavaScript 繁體版

原文原文链接

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

不想看步骤的能够直接下载DEMO 下载html

1、获取目的地坐标

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

以北京的朝阳公园为例，定位以下：git

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

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

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

导航接口为：api

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

具体的参数问题请看API：app

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 ）”我家”到”大雁塔”的驾车
路线。this

我在项目中要作的是获取当前的位置，而后导航到指定的项目以下：spa

<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>

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

getLocation() —> JS 利用html5 地理定位功能，获取当前的经纬度
showPosition()—>根据经纬度和百度API 拼接成本身的URL

实现的效果如图所示

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

PS：其实这个功能比较简单，百度的API能够实现的功能很强大，有兴趣的伙伴能够本身去研究一下。须要 demo加QQ 本身下载吧，祝学习愉快。

DEMO 下载