html5 计算步行数,高德地图API之步行路线
步行路线
引入插件 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之步行路线相关推荐
- 高德地图 API 显示跑步路线
模仿对象 此前在尝试制作时,我采用 Nike+ 官网效果为模板仿制.目前 Nike+ 已经升级,看不了之前版本的样式及动态效果,暂且看看样式区别不大的 Nike+ Run Club App 地图,动画 ...
- 高德地图API之步行路线
步行路线 引入插件 AMap.Walking <script type="text/javascript" src="https://webapi.amap.com ...
- 高德地图API之驾车路线
驾车路线 引入插件 AMap.Driving <script type="text/javascript" src="https://webapi.amap.com ...
- 百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数 ...
- 高德地图API武汉某区域的步行路径规划
高德地图API的武汉某区域的步行路径规划 利用python的requests函数,基于高德地图 网页服务API 使用地理编码化.步行路径规划等开发方法 以武汉武昌.青山交界处以区域为例 做已有出行点至 ...
- Android 高德地图API(详细步骤+源码)
高德地图API使用详解 前言 正文 一.创建应用 ① 获取PackageName ② 获取调试版安全码SHA1 ③ 获取发布版安全码SHA1 二.配置Android Studio工程 ① 导入SDK ...
- 【学习记录】使用高德地图API开发一个简单基础的WebGIS系统(GIS考研院校专题地图网站)
文章目录 0. 前言 1. 功能设计 2. 数据处理 3. 项目结构 4. 功能实现 4.1. 初始化 4.2. 地图基础功能模块 4.2.1. 放大缩小功能, 图层管理功能 4.2.2. 地图测量功 ...
- 高德地图markevents_GitHub - mingxuWang/Map: 高德地图API二次封装
Map组件设计文档 组件设计目的 分析当前各业务方向(销售端.商城.数据可视化.TMS)内地图相关应用的地图功能使用情况,封装Map组件供给各业务向进行使用. 将高德地图API进行二次封装,降低地图相 ...
- 【高德地图API】汇润做爱地图技术大揭秘
原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...
最新文章
- au加载默认的输入和输出设备失败_Mac OS X的音频输入输出时如何调整音量
- 计算机网络:第一章 概述
- Linux内核:关于中断你需要知道的【转】
- 深度学习与自然语言处理之四:卷积神经网络模型(CNN)
- chemdraw怎么连接两个结构_利用神经结构搜索构建快速准确轻量级的超分辨率网络...
- 351E. Jeff and Permutation
- Huffman编码(Huffman树)
- 那些没有兴趣花必要的C++时间
- 常用的分隔符有哪三种_Node.js系列四 - 常用的内置模块
- 将 vCenter Server vSphere 软件从 VMware vSphere 6.5 升级到 6.7
- 100%在CSS中是什么意思?
- 基于ARP协议获取局域网内主机MAC地址
- c语言判断素数(c语言判断素数)
- 软考:系统分析师考试大纲
- 进程间的通信方式(六种)
- 数据分析 超市条码_超市商品管理的11个常见问题 | 经验借鉴 | 商品管理
- 211. 字符串置换
- springBoot整合spring security实现权限管理(单体应用版)--筑基初期
- c语言斗兽棋源代码,智能斗兽棋-智能斗兽棋下载-医源世界
- freeCodeCamp 练习3 -- Learn accessbility by building a quiz
热门文章
- 站上历史浪潮的计算机(二)——图灵
- 广西计算机12月考试一级查询,全国高校计算机等级考试(广西考区)一级笔试试题09年度12月至11年度12月一级考试历年度真题(含答案).pdf...
- 【论文阅读-3】生成模型——变分自编码器(Variational Auto-Encoder,VAE)
- php 根据时间获取二十四节气,返回json
- 医学自然语言处理(NLP)相关论文汇总之 ACL 2022
- Kubernetes CKS 2021【3】---Cluster Setup - Dashboard
- Golang中文乱码配置解决流程
- 利用电表SOC芯片RN7211低成本实现三路高精度24位AD采集(带PGA功能)
- 基于golang编写的区块链公链demo
- 基于51单片机的热敏电阻数字温度计设计