高德地图——骑行路线&骑行指定
&plugin=AMap.Riding
也是[]中放json， 包含keyword和city，不能有途经
1、骑行路线（关键字）
<!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.Riding,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: 160px;
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'
}); /* new AMap.Riding({
map:map,
panel:'panel',
}).search([
{keyword:'北京大学',city:'北京'},
{keyword:'清华大学',city:'北京'}
],function(){ }) */ btn.onclick = function(){
new AMap.Riding({
map:map,
panel:'panel'
}).search([
{keyword:startNode.value,city:'北京'},
{keyword:endNode.value,city:'北京'}
],function(status,data){
console.log(data);
})
}; </script>
</body>
</html>
2、骑行指定（坐标）:点击地图任意两点
<!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.Riding,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: 160px;
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.Riding({
map:map,
panel:'panel'
}).search([116.379391,39.861536],[116.479391,39.961536],function(status,data){
console.log(data);
}) */ var num = 0,arr = [];
map.on('click',function(e){
num++;
if(num%2 ==1){
arr = [e.lnglat.R,e.lnglat.P];
}else{
new AMap.Riding({
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);
})
}
}) </script>
</body>
</html>
高德地图——骑行路线&骑行指定的更多相关文章
- 【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行
原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...
- iOS高德地图让指定区域或者点显示在屏幕中间
对于高德地图也是一个新手,很多功能看文档,问技术 或者高德群里讨论 群号:204668425 在我们需求中绘制的有 圆 折线 不规则图形 方式,打开地图指定的绘制图形置于屏幕中间 1.首先创建一个数 ...
- 转】未指定 INSTANCESHAREDWOWDIR 命令行值。如果指定INSTANCESHAREDDIR 值，则必须指定该值 .
插入光盘后不要用autorun的安装,使用命令行安装!cd进安装光盘的根目录,输入命令:setup.exe /INSTALLSHAREDDIR="D://Program Files//Mic ...
- 【高德地图API】从零開始学高德JS API（五）路线规划——驾车|公交|步行
先来看两个问题:路线规划与导航有什么差别?步行导航与驾车导航有什么差别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自己定义路线规划功能,这是别家没有 ...
- Vue项目（vuecli3.0搭建）集成高德地图实现路线轨迹绘制
先看最后实现的效果图 高德地图api文档 https://lbs.amap.com/api/javascript-api/summary 使用 1.在index.html里面引入高德地图js文件 2. ...
- JS框架_(JQuery.js)高德地图api
百度云盘 传送门 密码 :ko30 高德地图api效果 <!doctype html> <html> <head> <meta charset="u ...
- HTML5创建高德地图
创建高德地图 功能真的很好很强大,有图有证据! 1.申请key值 去官网2.https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db ...
- 【高德地图API】一句话搞定webmap（一）——轻地图组件
原文:[高德地图API]一句话搞定webmap(一)——轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而 ...
- 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...
随机推荐
- YsoSerial 工具常用Payload分析之CC3（二）
这是CC链分析的第二篇文章,我想按着common-collections的版本顺序来介绍,所以顺序为 cc1.3.5.6.7(common-collections 3.1),cc2.4(common- ...
- Linux chgrp命令的使用
Linux chgrp(change group)命令用于变更文件或目录的所属群组. 语法 chgrp [-cfhRv][--help][--version][所属群组][文件或目录...] 或 ch ...
- 监控实战之Prometheus
author:JevonWei 版权声明:原创作品 目录 一 背景 二 部署Prometheus Server Prometheus 主配置文件 targets 节点配置文件 rules 告警规则 运 ...
- Java学习常用链接
最全的Jenkins插件开发教程 最最最全的Jenkins插件开发教程_邪恶八进制-CSDN博客_jenkins插件开发 代理FQ工具Shadow socks https://www.blog-chi ...
- jquery 中 live() 对于js的需求版本导致不可用解决办法
$('body').on('click','.edit', function() { var id = $(this).parent().attr('id'); ...
- 说说Java异步调用的几种方式
日常开发中,会经常遇到说,前台调服务,然后触发一个比较耗时的异步服务,且不用等异步任务的处理结果就对原服务进行返回.这里就涉及的Java异步调用的一个知识.下面本文尝试将Java异步调用的多种方式进行 ...
- GoldenEye-v1靶机
仅供个人娱乐 靶机信息 下载地址:https://pan.baidu.com/s/1dzs_qx-YwYHk-vanbUeIxQ 一.主机扫描 二.信息收集 三.漏洞的查找和利用 boris I ...
- 媒体应用视频超分AI神器！360P视频一键转换HD
作为多媒体应用的开发者,你是否想为媒体播放器快速开发创新AI功能?例如: 在播放低画质视频过程中对其进行逐帧超分 让满屏飘飞的弹幕自动绕过画面的主体人物 HMS Core 6.0.0开放的多媒体管线服 ...
- vue传值 ---- >> 父传子，props()
父组件: 1 <template> 2 <div class="comment"> 3 <div>comment ...
- git基本命令-直接上手使用
git基本命令-直接上手使用 此篇为直接是使用git,如果想了解其原理和其他详细信息,请关注我,看其它相关文章 git创建仓库(初始化仓库) 使用当前目录作为仓库 git init // 执行该目录后 ...