步行路线

引入插件 amap.walking

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

var map=new amap.map("container",{

zoom:11

});

//使用插件

new amap.walking({

map:map,

panel:"panel"

}).search([

{keyword:"宁波大学",city:"宁波"},

{keyword:"汽车东站",city:"宁波"}

],function(status,data){

console.log(data);

});

输入起点和终点,点击按钮规划路线

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}

起点

终点

开始导航

var map=new amap.map("container",{

zoom:11

});

// 给起点和终点添加自动补全功能

new amap.autocomplete({

input:"node1"

})

new amap.autocomplete({

input:"node2"

})

btn.οnclick=function(){

//使用插件

new amap.walking({

map:map,

panel:"panel"

}).search([

{keyword:node1.value,city:"宁波"},

{keyword:node2.value,city:"宁波"}

],function(status,data){

console.log(data);

});

}

通过经纬度来进行导航

实现鼠标点击两个地址,自动进行导航

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}

var map=new amap.map("container",{

zoom:11

});

var i=0,arr=[];

map.on("click",function(e){

i++;

console.log(i);

if(i%2==1){

arr=[e.lnglat.r,e.lnglat.q];

}else{

//使用插件

new amap.walking({

map:map,

panel:"panel"

}).search(new amap.lnglat(arr[0],arr[1]),new amap.lnglat(e.lnglat.r,e.lnglat.q),function(status,data){

console.log(data);

});

}

})

常规用法

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}

var map=new amap.map("container",{

zoom:11

});

console.log(map.getcenter().tostring());//121.549792,29.868388

new amap.walking({

map:map,

panel:"panel"

}).search([121.549792,29.868388],[121.549792,29.468388],function(status,data){

console.log(data);

});

注意:如果是大于两个定位点,不能直接添加第三个,会报错

search中传的数组只能传2个

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}

var map=new amap.map("container",{

zoom:11

});

console.log(map.getcenter().tostring());//121.549792,29.868388

new amap.walking({

map:map,

panel:"panel"

}).search([121.549792,29.868388],[121.549792,29.468388],[121.549792,29.368388],function(status,data){

console.log(data);

});

正确的多点规划做法:(在每个定位点外面用再用数组括号包起来)

map

*{margin:0;padding:0;list-style: none;}

#container {width:100%; height: 100%;top:0;left:0;position: absolute; }

#panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}

#search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}

var map=new amap.map("container",{

zoom:11

});

console.log(map.getcenter().tostring());//121.549792,29.868388

new amap.walking({

map:map,

panel:"panel"

}).search([[121.549792,29.868388],[121.549792,30.468388],[121.549792,31.368388]],function(status,data){

//console.log(data);

});

现在无效了,我估计因为版本迭代被取消了吧!!!

html5 计算步行数,高德地图API之步行路线相关推荐

  1. 高德地图 API 显示跑步路线

    模仿对象 此前在尝试制作时,我采用 Nike+ 官网效果为模板仿制.目前 Nike+ 已经升级,看不了之前版本的样式及动态效果,暂且看看样式区别不大的 Nike+ Run Club App 地图,动画 ...

  2. 高德地图API之步行路线

    步行路线 引入插件 AMap.Walking <script type="text/javascript" src="https://webapi.amap.com ...

  3. 高德地图API之驾车路线

    驾车路线 引入插件 AMap.Driving <script type="text/javascript" src="https://webapi.amap.com ...

  4. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数 ...

  5. 高德地图API武汉某区域的步行路径规划

    高德地图API的武汉某区域的步行路径规划 利用python的requests函数,基于高德地图 网页服务API 使用地理编码化.步行路径规划等开发方法 以武汉武昌.青山交界处以区域为例 做已有出行点至 ...

  6. Android 高德地图API(详细步骤+源码)

    高德地图API使用详解 前言 正文 一.创建应用 ① 获取PackageName ② 获取调试版安全码SHA1 ③ 获取发布版安全码SHA1 二.配置Android Studio工程 ① 导入SDK ...

  7. 【学习记录】使用高德地图API开发一个简单基础的WebGIS系统(GIS考研院校专题地图网站)

    文章目录 0. 前言 1. 功能设计 2. 数据处理 3. 项目结构 4. 功能实现 4.1. 初始化 4.2. 地图基础功能模块 4.2.1. 放大缩小功能, 图层管理功能 4.2.2. 地图测量功 ...

  8. 高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装

    Map组件设计文档 组件设计目的 分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...

  9. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

最新文章

  1. au加载默认的输入和输出设备失败_Mac OS X的音频输入输出时如何调整音量
  2. 计算机网络:第一章 概述
  3. Linux内核:关于中断你需要知道的【转】
  4. 深度学习与自然语言处理之四:卷积神经网络模型(CNN)
  5. chemdraw怎么连接两个结构_利用神经结构搜索构建快速准确轻量级的超分辨率网络...
  6. 351E. Jeff and Permutation
  7. Huffman编码(Huffman树)
  8. 那些没有兴趣花必要的C++时间
  9. 常用的分隔符有哪三种_Node.js系列四 - 常用的内置模块
  10. 将 vCenter Server vSphere 软件从 VMware vSphere 6.5 升级到 6.7
  11. 100%在CSS中是什么意思?
  12. 基于ARP协议获取局域网内主机MAC地址
  13. c语言判断素数(c语言判断素数)
  14. 软考:系统分析师考试大纲
  15. 进程间的通信方式(六种)
  16. 数据分析 超市条码_超市商品管理的11个常见问题 | 经验借鉴 | 商品管理
  17. 211. 字符串置换
  18. springBoot整合spring security实现权限管理(单体应用版)--筑基初期
  19. c语言斗兽棋源代码,智能斗兽棋-智能斗兽棋下载-医源世界
  20. freeCodeCamp 练习3 -- Learn accessbility by building a quiz

热门文章

  1. 站上历史浪潮的计算机(二)——图灵
  2. 广西计算机12月考试一级查询,全国高校计算机等级考试(广西考区)一级笔试试题09年度12月至11年度12月一级考试历年度真题(含答案).pdf...
  3. 【论文阅读-3】生成模型——变分自编码器(Variational Auto-Encoder,VAE)
  4. php 根据时间获取二十四节气,返回json
  5. 医学自然语言处理(NLP)相关论文汇总之 ACL 2022
  6. Kubernetes CKS 2021【3】---Cluster Setup - Dashboard
  7. Golang中文乱码配置解决流程
  8. 利用电表SOC芯片RN7211低成本实现三路高精度24位AD采集(带PGA功能)
  9. 基于golang编写的区块链公链demo
  10. 基于51单片机的热敏电阻数字温度计设计