JS 百度地图导航
上一篇文章中我们就简单的学习了HTML5 地理定位,那么今天告诉大家我在项目中遇到的一个问题吧,就是怎么实现点击一个按钮就可以调到百度地图,并且获取到你当前的位置,并且导航到指定的地方去。
不想看步骤的可以直接下载DEMO 下载
一、获取目的地坐标
打开百度地图API 鼠标点击拾取坐标网页,http://api.map.baidu.com/lbsapi/getpoint/index.html,通过先缩小再放大,定位到拾取坐标的建筑物。
以北京的朝阳公园为例,定位如下:
鼠标点击的位置就是朝阳公园的坐标:
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®ion=西安&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®ion=广州&output=html&src=yourCompanyName|yourAppName";
}
</script>
很显然我们实现的就是两个步骤
- getLocation() —> JS 利用html5 地理定位功能,获取当前的经纬度
- showPosition()—>根据经纬度和百度API 拼接成自己的URL
实现的效果如图所示
这个就是可以在移动端或者PC都可以实现的导航到指定位置的功能。
PS: 其实这个功能比较简单,百度的API可以实现的功能很强大,有兴趣的伙伴可以自己去研究一下。需要 demo加QQ 自己下载吧,祝学习愉快。
JS 百度地图导航的更多相关文章
- 实现百度地图导航Demo的语音播报功能
上文中实现了在本地导入百度地图导航Demo,那么在此基础上如何实现导航的语音播报呢? 一.为该应用申请语音播报(也叫注册) http://developer.baidu.com/map/index.p ...
- JS 百度地图 地图线路描绘
JS 百度地图 地图线路描绘 <script type="text/javascript" src="http://api.map.baidu.com/api?v= ...
- JS 百度地图 换地图主题颜色(自定义)
JS 百度地图 换地图主题颜色(自定义) 可通过这个在线编辑得到自己想要的主题:https://developer.baidu.com/map/custom/ <div id="all ...
- JS 百度地图 换地图主题颜色(API自带)
JS 百度地图 换地图主题颜色(API自带) <script type="text/javascript" src="http://api.map.baidu.co ...
- H5调用百度地图导航
template <div class="map"> <div class="content_flex"><img src=&qu ...
- JS 百度地图-右键菜单
JS 百度地图-右键菜单 /*-----------------标注右键删除-------------------------*/ var markerMenu = new BMap.ContextM ...
- JS 百度地图路书---动态路线
JS 百度地图路书---动态路线 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" con ...
- iOS开发之百度地图导航
本篇主要讲述百度地图的导航功能: 第一步:在使用百度导航之前,我们需要在百度地图开放平台上下载导航的 SDK,共85.8M,网速不好的同学可提前准备好. 第二步:引入导航所需的系统包 将AudioTo ...
- 关于百度地图导航AndroidSDK的初始化问题
使用百度地图有一段时间了,导航是一个一直困扰我的问题.今天刚发现百度地图的导航SDK并不是对Android6.0版本不兼容.而是对某一部分手机不兼容,准确的说是对X64或X86的cpu不兼容.下载百度 ...
随机推荐
- hdu 1175冒牌连连看
#include <bits/stdc++.h> using namespace std; const int N = 1005; int arr[N][N]; int vis[N][N] ...
- scrum3.0
3.0----------------------------------------------------- SCRUM 流程的步骤2: Spring 计划 1. 确保product backlo ...
- MYSQL里使用正则的速度快还是使用like模糊查询语句快?
LIKE 会略快一些.但显然LIKE的功能无法与REGEXP相比. 另外是索引的问题,LIKE有可能使用索引但REGEXP则很难.
- CSS 在IE6, IE7 和IE8中的差别////////////////z
CSS 在IE6, IE7 和IE8中的差别 关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6,7和8共存.截至本文,Internet Explorer各个版本总共占据了 ...
- JQuery MultiSelect(左右选择框)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [Phalcon] Phalcon系统默认事件列表
版本: 2.0.6 Phalcon\Mvc\Application application:boot 可终止 是 参数 Phalcon\Events\Event $event 事件本身 Phalcon ...
- 欧姆龙PLC以太网FINSTCP通信例程与操作步骤
http://wenku.baidu.com/link?url=aa8kvtCg1eYp-wkIZY_hDpE5IuENT21Uvk1zVNtFiIyPTk-kjfarzSVyGt2DPs4ikXLT ...
- 深入理解Java PriorityQueue
PriorityQueue 本文github地址 Java中PriorityQueue通过二叉小顶堆实现,可以用一棵完全二叉树表示.本文从Queue接口函数出发,结合生动的图解,深入浅出地分析Prio ...
- 删除MSSQL数据库中所有表
--删除所有约束 DECLARE c1 cursor for select 'alter table ['+ object_name(parent_obj) + '] drop constraint ...
- ipcs命令
unix/linux下的共享内存.信号量.队列信息管理 在unix/linux下,经常有因为共享内存.信号量,队列等共享信息没有干净地清楚而引起一些问题. 查看共享信息的内存的命令是ipcs [-m| ...