高德地图——骑行路线&骑行指定
&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|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...
随机推荐
- 每天五分钟Go - 闭包
闭包的示例代码 func getSequence() func() int{ i:=0 return func() int { i+=1 return i } } 首先,函数名getSequence, ...
- P5296 [北京省选集训2019]生成树计数
P5296 [北京省选集训2019]生成树计数 题意 求一个带权无向图所有生成树边权和的 \(k\) 次方的和. 思路 首先有一个结论:\(a^i\) 的 EGF 卷 \(b^i\) 的 EGF 等于 ...
- 第十一篇 -- QMainWindow与QAction（斜体-粗体-下划线）
效果图: ui_mainWindow.py # -*- coding: utf-8 -*- # Form implementation generated from reading ui file ' ...
- C++模板封装Win32 API 动态调用
起因 花两周通读了一遍<C++ Primer>,积攒的疑惑一扫而光. 前因 利用C++11可变模板,封装调用dll导出函数 本以为已经很好用了,最近抽时间巩固下知识体系,发现自己道行不够! ...
- Java 中 this 和 super 的用法详解
前言 这次我们来回顾一下this和super这两个关键字的用法,作为一名Java程序员,我觉得基础是最重要的,因为它决定了我们的上限,所以我的文章大部分还是以分享Java基础知识为主,学好基础,后面的 ...
- 渗透测试思路 - CTF(番外篇)
渗透测试思路 Another:影子 (主要记录一下平时渗透的一些小流程和一些小经验) CTF(番外篇) 笔者是一个WEB狗,更多的是做一些WEB类型题目,只能怪笔者太菜,哭~~ 前言 本篇 ...
- synchronized 加锁 this 和 class 的区别！
synchronized 是 Java 语言中处理并发问题的一种常用手段,它也被我们亲切的称之为"Java 内置锁",由此可见其地位之高.然而 synchronized 却有着多种 ...
- 根据随身固态U盘卷标搜索U盘盘符并打开文件的批处理脚本.bat 徐晓亮 595076941@qq.com 2019年12月19日6点50分
@Echo offRem 根据随身固态U盘卷标搜索U盘盘符并打开文件的批处理脚本.batRem 徐晓亮 595076941@qq.com 2019年12月19日6点50分 Rem 此批处理脚本源代码的 ...
- 手把手教centos安装docker
目录 版本说明 官网安装教程 安装docker 现在网络上安装教程满天飞,很大一部分是别人的总结,可以说是成果,却没有介绍如何去实现这个成果方法.这篇就结合官网教程来聊聊如何在centos上安装doc ...
- Android中的一些小细节
在代码中获取到的padding .margin.getWidth.event.getX.context.getResources().getDimensionPixelSize(R.dimen.key ...