高德地图——步行路线&步行路线的坐标规划
步行操作与开车一样
唯一区别就是src末尾加入&plugin=AMap.Walkling
以及new AMap.Walking（｛｝）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Walking,AMap.Autocomplete"></script>
<title>通过经纬度进行导航</title>
<style>
*{
padding: 0;
margin: 0;
}
#container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#panel{
position: fixed;
background: white;
top: 10px;
right: 10px;
width: 280px;
}
#search{
width: 200px;
height: 120px;
position: absolute;
left: 10px;
top: 10px;
background: white;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div id="search">
起点：<input type="text" name="" id="startNode"/><br />
终点：<input type="text" name="" id="endNode"/><br />
<button id="btn">开始导航</button>
</div> <script>
var map = new AMap.Map('container',{
zoom:11,
center:[116.379391,39.861536], }); new AMap.Autocomplete({
input:'startNode'
});
new AMap.Autocomplete({
input:'endNode'
});
btn.onclick = function(){
new AMap.Walking({
map:map,
panel:'panel'
}).search([
{keyword:startNode.value,city:'北京'},
{keyword:endNode.value,city:'北京'}
],function(status,data){
console.log(data);
})
}; /* new AMap.Walking({
map:map,
panel:'panel'
}).search([
{keyword:'北京南站',city:'北京'},
{keyword:'天宫院',city:'北京'}
],function(status,data){
console.log(data);
}) */ </script>
</body>
</html>
步行路线的坐标规划:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Walking,AMap.Autocomplete"></script>
<title>步行规划</title>
<style>
*{
padding: 0;
margin: 0;
}
#container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#panel{
position: fixed;
background: white;
top: 10px;
right: 10px;
width: 280px;
}
#search{
width: 200px;
height: 120px;
position: absolute;
left: 10px;
top: 10px;
background: white;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div id="search">
起点：<input type="text" name="" id="startNode"/><br />
终点：<input type="text" name="" id="endNode"/><br />
<button id="btn">开始导航</button>
</div> <script>
var map = new AMap.Map('container',{
zoom:11,
center:[116.379391,39.861536], }); var num = 0, arr = [];
map.on('click',function(e){
num++;
if(num%2 == 1){
arr = [e.lnglat.R,e.lnglat.P];
}else{
new AMap.Walking({
map:map,
panel:'panel'
}).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.R,e.lnglat.P),function(status,data){
console.log(data);
})
}
}); /* new AMap.Walking({
map:map,
panel:'panel'
}).search([116,38],[116,40],function(status,data){
console.log(data);
})
*/
/* new AMap.Walking({
map:map,
panel:'panel'
}).search([
{keyword:'北京南站',city:'北京'},
{keyword:'天宫院',city:'北京'}
],function(status,data){
console.log(data);
}) */ </script>
</body>
</html>
高德地图——步行路线&步行路线的坐标规划的更多相关文章
- iOS - 高德地图步行线路规划多点多条线路
项目集成高德地图遇到的问题: 高德地图的官方步行导航只针对单个起始点单条线路,驾车导航才有途径点多线路.现在项目是要步行导航多个点多条线路
- 百度地图、高德地图、Google地图等坐标系相关梳理
1.地理坐标系与投影坐标系 地理坐标系也就是球面坐标系,是将本不是椭球体的地球进行椭球体化,从而形成球面坐标体系,国际标准的地理坐标系就是WGS-84坐标系: 只不过各个国家为了反映该国家所在区域地球 ...
- 【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行
原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...
- 【高德地图API】从零開始学高德JS API（五）路线规划——驾车|公交|步行
先来看两个问题:路线规划与导航有什么差别?步行导航与驾车导航有什么差别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自己定义路线规划功能,这是别家没有 ...
- Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制
先看最后实现的效果图 高德地图api文档 https://lbs.amap.com/api/javascript-api/summary 使用 1.在index.html里面引入高德地图js文件 2. ...
- JS 百度地图路书---动态路线
JS 百度地图路书---动态路线 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" con ...
- 时时获得高德地图坐标 http://lbs.amap.com/console/show/picker
1.高德地图标注 在做开发时,或者做高德地图标注的时候,要用到高德地图的坐标,时时获得高德地图坐标 http://lbs.amap.com/console/show/picker 老的高德地图标注地址 ...
- GPS定位为什么要转换处理？高德地图和百度地图坐标处理有什么不一样？
GPS定位为什么要转换处理?高德地图和百度地图坐标处理有什么不一样? 先了解一下 高德地图 采用: GCJ-02 (不可逆) 百度百科: http://baike.baidu.com/link?url ...
- 【高德地图API】如何解决坐标转换，坐标偏移？
http://bbs.amap.com/thread-18617-1-1.html#rd?sukey=cbbc36a2500a2e6c2b0b19115118ace519002ff3a52731f13 ...
随机推荐
- 第3天 IDEA 2021简单设置与优化 Java运算符 包机制
IDEA 2021简单设置与优化 将工具条显示在上方 View–>Appearance–>Toolbar 鼠标悬停显示 File–>setting–>Editor–>Ge ...
- 我去！爬虫遇到JS逆向AES加密反爬，哭了
今天准备爬取网页时,遇到『JS逆向AES加密』反爬.比如这样的: 在发送请求获取数据时,需要用到参数params和encSecKey,但是这两个参数经过JS逆向AES加密而来. 既然遇到了这个情况,那 ...
- 第十五篇 -- QListWidget与QToolButton（界面）
效果图: 这还只是一个界面,并没有实现相应功能. 先看下这图的构成吧. 工具栏的就是将Action拖上去,这部分前面已经介绍过了,那就看下面这部分的构图. 1.左侧是一个工具箱(ToolBox)组件, ...
- 使用Elastic Job的时候报“Job conflict with register center”，如何处理？
昨天,有群友反应根据之前这篇<使用Elastic Job实现定时任务>文章编写测试定时任务的时候,报了类似下面的这个错误: Caused by: org.apache.shardingsp ...
- 字符串匹配算法(二)-BM算法详解
我们在字符串匹配算法(一)学习了BF算法和RK算法,那有没更加高效的字符串匹配算法呢.我们今天就来聊一聊BM算法. BM算法 我们把模式串和主串的匹配过程,可以看做是固定主串,然后模式串不断在往后滑动 ...
- Python - dict 字典常见方法
字典详解 https://www.cnblogs.com/poloyy/p/15083781.html get(key) 作用 指定键,获取对应值 两种传参 dict.get(key):键存在则返回对 ...
- 《SEO实战密码》
一.搜索引擎 1.蜘蛛访问网站时都会先访问网站根目录下的 robots.txt 文件. 2.蜘蛛喜欢访问经常更新的页面. 3.离首页点击距离越近,页面权重越高. 4.使用"" + ...
- python实现常用五种排序算法
一.冒泡排序 原理: 比较相邻的元素.如果第一个比第二个大就交换他们两个 每一对相邻元素做同样的工作,直到结尾最后一对 每个元素都重复以上步骤,除了最后一个 第一步: 将乱序中的最大值找出,逐一移到序 ...
- 靶机DC-2 rbash绕过+git提权
这个靶机和DC-1一样,一共5个flag.全部拿到通关. root@kali:/home/kali# nmap -sP 192.168.1.* 先扫一下靶机的IP地址,拿到靶机的地址为192.168. ...
- 月薪60k，仍无人问津，腾讯阿里到底有多缺这类程序员？
不知道大家发现没,近几年,国内对音视频人才需求越来越大了,在某招聘网站上居然薪酬高达60k. 从未来的大趋势来看,随着5G时代的到来,音视频慢慢变成人们日常生活中的必须品.除了在线教育.音视频会议.即 ...