高德地图——公交路线规划(关键字&坐标)
- &plugin=AMap.Transfer
- 1、关键词方式---不支持途径(仅支持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.Transfer,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.Transfer({
- map:map,
- panel:'panel'
- }).search([
- {keyword:'西单大悦城',city:'北京'},
- {keyword:'朝阳公园',city:'北京'}
- ],function(status,data){
- console.log(data);
- }) */
- new AMap.Autocomplete({
- input:'startNode'
- });
- new AMap.Autocomplete({
- input:'endNode'
- });
- btn.onclick = function(){
- new AMap.Transfer({
- 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.Transfer,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],
- });
- var num = 0,arr =[];
- map.on('click',function(e){
- num++;
- if(num%2 == 1){
- arr = [e.lnglat.R,e.lnglat.P];
- }else{
- new AMap.Transfer({
- map:map,
- panel:'panel',
- city:'北京'
- }).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>
高德地图——公交路线规划(关键字&坐标)的更多相关文章
- 调用高德地图web api 规划路线
实现地图输出,出发地与目的地路线,效果如下 具体代码如下 <!doctype html> <html> <head> <meta charset=" ...
- Android学习笔记之使用百度地图实现路线规划+公交信息检索
PS:装了个deepin,感觉真的很高大上. 学习内容: 1.公交信息检索 2.路线规划 关于百度地图的开发也就这么多了.重要的部分也就那么些.原本打算搞到poi搜索就算了,不过看到了这两个方面还 ...
- Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制
先看最后实现的效果图 高德地图api文档 https://lbs.amap.com/api/javascript-api/summary 使用 1.在index.html里面引入高德地图js文件 2. ...
- iOS - 高德地图步行线路规划多点多条线路
项目集成高德地图遇到的问题: 高德地图的官方步行导航只针对单个起始点单条线路,驾车导航才有途径点多线路.现在项目是要步行导航多个点多条线路
- 高德地图——步行路线&步行路线的坐标规划
步行操作与开车一样 唯一区别就是src末尾加入&plugin=AMap.Walkling 以及new AMap.Walking({}) <!DOCTYPE html> <ht ...
- 如何实现在H5里调起高德地图APP?(下)
这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...
- 如何实现在H5里调起高德地图APP?
http://www.cnblogs.com/milkmap/p/5912350.html 这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点.适合于展示某个餐馆,商场等,让用户自行选择前 ...
- 如何实现在H5里调起高德地图APP
这一篇文章将告诉您,如果直接打开高德地图APP,并展示路线规划.适合有定位的移动设备,可以查询到从“我的位置”到目的地的路径规划,并直接导航. 场景二.调起高德地图的路线规划功能 导航是目前JSAPI ...
- 【高德地图API】从零开始学高德JS API(五)路线规划——驾车|公交|步行
原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...
随机推荐
- 开发工具IDE从入门到爱不释手(三)运行与调试
一.启动项目 右键运行 菜单运行 run窗口运行 启动参数 -D可覆盖,application.properties中的配置 如: 自动编译 二.调试项目 断点调试 蓝色背景的行,就是当前程序停住的行 ...
- Python自动化测试面试题-Redis篇
目录 Python自动化测试面试题-经验篇 Python自动化测试面试题-用例设计篇 Python自动化测试面试题-Linux篇 Python自动化测试面试题-MySQL篇 Python自动化测试面试 ...
- Easyui设置easyui-textbox不可编辑
转载自:https://blog.csdn.net/qq_23113521/article/details/78801689 在easyui里由于easyui-textbox被封装,通过一般的jque ...
- js 倒计时退出
<p>您已提交成功!<span id='submit_second'></span></p> $("#submit_second") ...
- 云服务器是什么?ECS、BCC、CVM...
什么是云服务器?云服务器有哪些优势?能用来干什么? 很多人不太了解云服务器的定义和用途. 云服务器是一种简单高效.处理能力可弹性伸缩的计算服务,帮助用户快速构建更稳定.安全的应用,提升运维效率,降低 ...
- C++员工管理系统(封装+多态+继承+分类化+函数调用+读写文件+指针+升序降序算法等一系列知识结合)
1 C++职工管理系统 2 该项目实现 八个 功能 3 1-增加功能 2-显示功能 3-删除功能 4-修改功能 4 5-查找功能 6-排序功能 7-清空功能 8-退出功能 5 实现多个功能使用了多个C ...
- jmeter永久调为中文
将jmeter调为中文有两种方法,一是在软件设置中切换,二是修改配置文件. 第一种方式是临时的,下次重新打开会变回为英文 第二种方式是永久的,每次打开都会显示自己配置好的语言 第一种方式: 第二种方式 ...
- Linux守护进程及Systemd
当我们启动一个前台任务后,命令行窗口退出,应用也就一起退出,无法访问了.怎么才能让它变成系统的守护进程(daemon),成为一种服务(service),一直在那里运行呢? 守护进程 前台任务和后台任务 ...
- kivy之Button常用属性实操练习
kivy提供了Button按钮一系列属性来改变样式,下面列了常用的一些Button属性并用实操案例进行演练学习. 新建一个main.py,内容代码如下: from kivy.app import Ap ...
- CTF--[BJDCTF2020]Cookie is so stable 1(SSTI)
从hint.php可以找到提示,要求观察cookies 打开flag.php可以看到需要输入用户名,多次试验后发现输入的用户名会以cookies的方式储存 使用dirsearch扫描没有发现什么有用的 ...