高德 通过 起 经 止 经纬度 获取路线经纬度

  • 前言
  • 一、经纬度获取代码
  • 二、效果图演示
  • 三、DEMO 演示地址
  • 总结

前言

之前工作的公司与道路相关，后端同事经常需要采集路线坐标，网上又没有找到合适的工具，因此请我帮忙写了一个可以根据起始点，经过点，终点，经纬度获取整条路线经纬度数组的一个功能，下面就演示获取经纬度的代码以及DEMO。

一、经纬度获取代码

代码使用Vue + elementUI 布局，Amap.js 绘制地图、路线，以及获取路线经纬度。

html

<script src="https://webapi.amap.com/maps?v=2.0Beta&key=523c9fc07c690089f319101a72c2c13e&plugin=AMap.DragRoute,AMap.PlaceSearch"></script><div id="app"><div class="coordinate-acquisition-wraper" v-loading="isLoading"><div class="filter-wrap" :class="{expand: isExpand}"><i class="el-icon" :class="isExpand ? 'el-icon-arrow-left':'el-icon-arrow-right'" @click="isExpand = !isExpand"></i><el-form class="custom-scrollbar" :model="formData" ref="form" size="small" label-width="100"><el-form-item label="选择定位位置"><el-input type="text" v-model="formData.keyword" @keyup.native.enter="posSearchHandle" placeholder="请输入位置" clearable="clearable" @clear="clearHandle"></el-input><el-button icon="el-icon-search" type="primary" @click="posSearchHandle"></el-button></el-form-item><el-form-item :label="`经纬度${i+1}`" v-for="(item, i) in formData.coordinates" :key="i" :rules="rules.coordinate" :prop="`coordinates.${i}`"><el-input type="text" v-model="formData.coordinates[i]" icon="md-navigate" placeholder="请输入经纬度" :class="{active: active === i}"><i class="el-input__icon el-icon-s-promotion" slot="suffix" @click="activeHandle(i)"></i></el-input><el-button icon="el-icon-close" type="danger" v-if="formData.coordinates.length &gt; 2" @click="removePointHandle(i)"></el-button><el-button icon="el-icon-plus" type="primary" v-if="formData.coordinates.length &lt; 15" @click="formData.coordinates.splice(i + 1, 0, ''); active = i+1"></el-button></el-form-item><el-button type="primary" @click="renderLine">查询路线</el-button><el-form-item label="经纬度段坐标"><el-input type="textarea" v-model="sectionStr" readonly="readonly" :rows="2"></el-input></el-form-item><el-form-item label="返回路线坐标"><el-input type="textarea" v-model="formData.result" readonly="readonly" :rows="3"></el-input></el-form-item><p>可在控制台查看完整路线对象</p></el-form></div><div class="style-change"><span>地图主题：</span><el-select v-model="formData.style" @change="setMapStyle"><el-option v-for="(item, i) in styleOptions" :label="item.label" :value="item.value"></el-option></el-select></div><div class="search-result custom-scrollbar" id="search-result" ref="searchResult"></div><div class="coordinate-acquisition" id="coordinate-acquisition" :class="{active: active !== -1}"></div></div>
</div>

JavaScript

new Vue({el: '#app',name: 'CoordinateAcquisition',data() {return {isExpand: true,isLoading: false,formData: {keyword: '',coordinates: ['116.303843,39.983412', '116.407012,39.992093'],start: '116.303843,39.983412',end: '116.407012,39.992093',result: '',style: 'light',},styleOptions: [{label: '幻影黑',value: 'dark',},{label: '月光银',value: 'light',},{label: '远山黛',value: 'whitesmoke',},{label: '草色青',value: 'fresh',},{label: '雅士灰',value: 'grey',},{label: '涂鸦',value: 'graffiti',},{label: '马卡龙',value: 'macaron',},{label: '靛青蓝',value: 'blue',},{label: '极夜蓝',value: 'darkblue',},{label: '酱籽',value: 'wine',},],aMap: null,route: null,placeSearch: null,active: -1,rules: {coordinate: [{required: true,message: '请输入经纬度',},],},timer: null,}},computed: {sectionStr() {return JSON.stringify(this.formData.coordinates.map((item) => item.split(',').map((v) => +v)))},},mounted() {setTimeout(() => {this.initMap()}, 1000)},methods: {clearHandle() {this.$refs.searchResult.innerHTML = ''},posSearchHandle() {// 关键字查询this.formData.keyword && this.placeSearch.search(this.formData.keyword)},setMapStyle() {let styleName = 'amap://styles/' + this.formData.stylethis.aMap.setMapStyle(styleName)// this.aMap.setZoom(13)},activeHandle(i) {if (this.active === i) {this.active = -1} else {this.active = i}},removePointHandle(i) {// clearTimeout(this.timer)this.formData.coordinates.splice(i, 1)// this.timer = setTimeout(() => {//   this.renderLine()// }, 300)},initMap() {//   AMapLoader.load({//     key: '523c9fc07c690089f319101a72c2c13e',//     version: '2.0Beta',//     // 'key': ' 523c9fc07c690089f319101a72c2c13e', // 申请好的Web端开发者Key，首次调用 load 时必填//     // 'version': '2.0Beta' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15//     plugins: ['AMap.DragRoute', 'AMap.PlaceSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等//     // 'AMapUI': { // 是否加载 AMapUI，缺省不加载//     //   'version': '1.1', // AMapUI 缺省 1.1//     //   'plugins': [] // 需要加载的 AMapUI ui插件//     // },//     // 'Loca': { // 是否加载 Loca， 缺省不加载//     //   'version': '1.3.2' // Loca 版本，缺省 1.3.2//     // }//   })//     .then((AMap) => {this.aMap = new window.AMap.Map('coordinate-acquisition', {zoom: 5,mapStyle: `amap://styles/${this.formData.style}`,})// 构造地点查询类this.placeSearch = new window.AMap.PlaceSearch({pageSize: 5, // 单页显示结果条数pageIndex: 1, // 页码// city: '010', // 兴趣点城市// citylimit: true, // 是否强制限制在设置的城市内搜索map: this.aMap, // 展现结果的地图实例panel: 'search-result', // 结果列表将在此容器中进行展示。autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围})this.placeSearch.on('markerClick', () => {this.aMap.setZoom(15)})this.aMap.on('click', (e) => {if (this.active !== -1) {this.$set(this.formData.coordinates, this.active, `${e.lnglat.lng},${e.lnglat.lat}`)// this.$nextTick(() => {//   this.renderLine()// })}})// })// .catch((e) => {//   console.log(e)// })},renderLine() {this.$refs.form.validate((valid) => {if (valid) {this.isLoading = trueif (this.route) {this.route.destroy()}// path 是驾车导航的起、途径和终点，最多支持16个途经点let path = this.formData.coordinates.map((v) => v.split(','))// let path = []// path.push(this.formData.start.split(','))// path.push([116.321354, 39.896436])// path.push(this.formData.end.split(','))this.route = new window.AMap.DragRoute(this.aMap, path, window.AMap.DrivingPolicy.LEAST_DISTANCE)// 查询导航路径并开启拖拽导航this.route.search()this.route.on('complete', ({ data, target }) => {this.isLoading = falsethis.active = -1this.formData.coordinates = target._path.map((v) => `${v.lng},${v.lat}`)let arr = this.route.getRoute()let posArr = arr.map((item) => [item.lat, item.lng])this.formData.result = JSON.stringify(posArr)// this.$Message.success('可在控制台查看完整路线对象')let css = 'font-size: 20px; font-weight: bold;font-family: 微软雅黑; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 1);'console.clear()console.log('%c行车路线对象  ↓', css)console.log(data)console.log('%c行车路线数组  ↓', css)console.log(arr)console.log('%c行车路线经纬度  ↓', css)console.log(posArr)console.log('%c行车路线经纬度JSON串  ↓', css)console.log(this.formData.result)})this.route.on('addway', ({ target }) => {this.active = -1this.formData.coordinates = target._path.map((v) => `${v.lng},${v.lat}`)})}})},},
})

CSS

#app,
body,
html {height: 100%;padding: 0;margin: 0;
}
.coordinate-acquisition-wraper {height: 100%;position: relative;font-family: "微软雅黑";
}
.coordinate-acquisition-wraper .style-change span {font-size: 14px;font-weight: bold;font-family: "微软雅黑";
}
.coordinate-acquisition-wraper .filter-wrap {border-right: 1px solid #ddd;position: absolute;z-index: 7;height: 100%;background-color: #fff;transition: left 0.3s;padding: 10px 0 10px 10px;width: 397px;box-sizing: border-box;left: -397px;
}
.coordinate-acquisition-wraper .filter-wrap.expand {left: 0;
}
.coordinate-acquisition-wraper .filter-wrap > .el-icon {cursor: pointer;font-size: 18px;position: absolute;right: -17px;height: 60px;line-height: 60px;width: 16px;box-shadow: 1px 1px 2px rgba(0,0,0,0.1);top: calc(50% - 30px);background-color: #fff;border-radius: 0 5px 5px 0;
}
.coordinate-acquisition-wraper .el-form {height: 100%;overflow: auto;
}
.coordinate-acquisition-wraper .el-form p {color: #888;text-shadow: 0 0 1px #fff;padding-left: 100px;
}
.coordinate-acquisition-wraper .el-form > .el-button {display: block;margin-left: 212px;margin-bottom: 10px;
}
.coordinate-acquisition-wraper .el-form .el-form-item {margin-bottom: 20px;padding-right: 10px;
}
.coordinate-acquisition-wraper .el-form .el-form-item .el-input.active .el-icon-s-promotion {color: #409eff;
}
.coordinate-acquisition-wraper .el-form .el-form-item .el-icon-s-promotion {cursor: pointer;
}
.coordinate-acquisition-wraper .el-form .el-form-item .el-form-item-error-tip {position: static;
}
.coordinate-acquisition-wraper .el-form .el-form-item .el-form-item__content {display: flex;
}
.coordinate-acquisition-wraper .el-form .el-form-item .el-button {margin-left: 3px;
}
.coordinate-acquisition-wraper .coordinate-acquisition {height: 100%;
}
.coordinate-acquisition-wraper .coordinate-acquisition.active .amap-layer {cursor: crosshair !important;
}
.coordinate-acquisition-wraper .coordinate-acquisition .amap-copyright,
.coordinate-acquisition-wraper .coordinate-acquisition .amap-logo {display: none !important;
}
.coordinate-acquisition-wraper .style-change {position: absolute;z-index: 7;right: 10px;top: 10px;
}
.coordinate-acquisition-wraper .style-change .el-select {width: 120px;
}
.coordinate-acquisition-wraper .search-result {position: absolute;z-index: 7;top: 50px;right: 10px;max-height: calc(100% - 70px);overflow: auto;
}

二、效果图演示


功能描述
1.可以通过输入选择定位位置搜索需要查询的地方
2.选择 飞机图标变蓝后可以点击地图 自动插入点击处经纬度
3.可以新增 经过点 经纬度（通过+加号，或地图上路线点击拖拽）
4.官方自带主题可以切换
5.点击查询路线，会根据以上所填经纬度查询经过经过所有经纬度的路线斌返回经过经纬度路线数组

三、DEMO 演示地址

根据起 、经、止 经纬度查询路线经纬度 演示demo
在demo 内可在线编辑代码

总结

以上信息如有疏漏或错误欢迎指正，谢谢。

高德 通过 起 经 止 经纬度 获取路线经纬度，（可搜索位置，新增经过点）相关推荐

  1. 根据经纬度获取地址 :位置名称 区 市 省 国家 邮编

    方式1: 根据经纬度获取: 省 市 区 位置名称 import java.net.URL; import java.util.HashMap; import java.util.Map; import ...

  2. 通过地址获取经纬度和通过经纬度获取地址

    1.通过地址获取该地址的经纬度 /** * @param addr * 查询的地址 * @return * @throws IOException */public Object[] getCoord ...

  3. 利用高德地图API批量获取地点经纬度和行车线路与OD距离（excel和python）

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.excel调取API方法 1.申请一个key 2.excel调用API 二.python方法 计算地址列表中两两之 ...

  4. Vue+高德高精度定位IP定位+高德位置经纬度货车路线规划，实现实时路线规划

    功能实现:实时获取当前位置,并规划到目的地的路线 实现思路: 1.定位当前位置,先精确定位,若精确定位失败则使用IP定位 2.渲染地图,规划路线 3.刷新当前位置,重新渲染路线规划 一.引入高德地图 ...

  5. 通过经纬度获取OpenstreetMap，谷歌地图，高德地图的切片

    直接复制代码放到本地运行即可 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...

  6. java后端根据经纬度获取地址（高德地图）

    1.申请高德地图key 2.逆地理编码(坐标->地址)-地理X: https://lbs.amap.com/demo/jsapi-v2/example/geocoder/regeocoding ...

  7. 高德地图报错USERKEY_PLAT_NOMATCH解决办法 + 通过经纬度获取当前位置

    一.场景 我希望通过一个按钮能获取到当前的位置信息. 比如说街道.周围的地标啥的- 二.编写代码.执行.并发现问题 1.通过 js获取到经纬度, 2.通过高德地图api提供的地理逆解析获取到相关信息: ...

  8. WEB开发 高德地图应用，初始加载，地图定位，层级变化控制，根据经纬度获取详细地址信息，点击事件以及地图自适应

    1.前台html位置准备 <div id="Sharingrouter">             <div id="container" r ...

  9. 高德地图——浏览器定位+点击获取经纬度+去除高德百度地图左下角logo

    高德地图--浏览器定位+点击获取经纬度+去除高德百度地图左下角logo 1.代码 <!doctype html> <html> <head><meta cha ...

最新文章

  1. DivCSS网页布局中CSS无效的十个常见原因
  2. 斯坦福马超：随机梯度下降，也爱躺「平」……why？
  3. WPF如何获得变量异步回调函数时产生的异步回调
  4. WordPress前台后台出现一片空白的原因以及解决办法
  5. Centos 安装配置gerrit
  6. LinkedList源码阅读笔记（1.8）
  7. mysql简单的命令_Mysql 的一些简单的命令
  8. mysql 8.0以上重置密码
  9. 博文视点云原生书单丨释放云原生技术红利
  10. Arp病毒专杀工具下载及其防治解决方案
  11. C++回调函数使用心得
  12. 题解 - CF613D Kingdom and its Cities
  13. html盒子连续点击连续移动,html盒子整体向下移动
  14. oracle截取6位,Oracle函数获取IDCARD中年龄
  15. 如何在输入特殊符号，例如角度“∠”
  16. Kubernetes全栈架构师（资源调度下）--学习笔记
  17. java模拟内存溢出并分析_本地模拟内存溢出并分析Dump文件
  18. ubuntu20.04 java 开发环境搭建及 JNI 使用
  19. 《德川家康》完整版的下载
  20. 每周网页练习—网易邮箱首页

热门文章

  1. 关闭VS的实时调试器
  2. 等响度曲线_响度与等响曲线
  3. 【2023B题】人工智能对大学生学习影响的评价(思路、代码）
  4. LeetCode刷题——链表OJ（历时三天，万字博客，十一道经典题，带你手撕链表）
  5. 红酒柜台面合理跳出会更好看
  6. ​大数据和云计算技术周报（第41期） - 云+社区 - 腾讯云
  7. popen使用方法及场景
  8. 渗透测试——信息收集之APP提取敏感信息
  9. SpringBoot的properties和yml两种配置方式, 配置注入参数, 以及配置文件读取失效的问题
  10. 对一个字符串中的字符进行遍历