devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue 使用高德地图实现自定义选取起点和终点功能，支持搜索地址跳转定位（保姆级教程）_vue地图选点

作者：羊村懒王 | 2024-03-09 17:44:16

赞

踩

vue地图选点

一、效果演示

1. 起点终点选择

 2. 地址搜索

 

二、准备工作

1. 获取高德地图key

1.1  访问高德地图官网注册完成后登录，进入控制台

 1.2  左侧 应用管理-我的应用，点击创建新应用

1.3 点击添加

 

1.4 选择Web端(JS API) 

1.5 创建完成，得到key和安全密钥

 

2. 引入高德地图npm包

npm i @amap/amap-jsapi-loader --save

 三、正式开始写代码

提示：以下代码全部在*.vue文件中编写，无其他文件

1. 设置key和安全密钥，初始化地图

把xxxxxxxxxxxxxxxxxxx换成自己申请的

  1. <script>
  2. import AMapLoader from "@amap/amap-jsapi-loader";
  3. // 设置安全密钥
  4. window._AMapSecurityConfig = {
  5.   securityJsCode: 'xxxxxxxxxxxxxxxxx',
  6. }
  7. export default {
  8.     mounted() {
  9.         this.initMap();
  10.     },
  11.     data(){
  12. 	  return {
  13. 		//提交表单
  14. 		form:{},	
  15.         //地图实例
  16.         map: null,
  17.         //路径坐标点集合
  18.         coordinateList: [],
  19.         //起点坐标
  20.         startCoordinate: {},
  21.         //终点坐标
  22.         endCoordinate: {},
  23.         //起点坐标描述
  24.         startCoordinateDescription: '经度：请选择起点' + ',     纬度：请选择起点' ,
  25.         //终点坐标描述
  26.         endCoordinateDescription: '经度：请选择终点' + ',     纬度：请选择终点',
  27.         //选择起点
  28.         isStart: true,
  29.         //起点Marker
  30.         startMarker: null,
  31.         //终点Marker
  32.         endMarker: null,
  33.         //搜索点Marker
  34.         searchMarker: null,
  35.         // 搜索提示
  36.         AutoComplete: null,
  37.         // 搜索关键字
  38.         keywords: "",
  39.         // 搜索节流阀
  40.         loading: false,
  41.         // 搜索提示信息
  42.         options: [],
  43.  
  44.       }
  45. 	},
  46.     methods: {
  47.         //初始化地图
  48.         initMap() {
  49.         AMapLoader.reset()
  50.         AMapLoader.load({
  51.           key: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
  52.           version: '2.0',   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  53.           plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Marker'],  // 需要使用的的插件列表
  54.           AMapUI: {
  55.             version: '1.1',
  56.             plugins: []
  57.           }
  58.         }).then((AMap)=>{
  59.           // 初始化地图
  60.           this.map = new AMap.Map('guide-map',{
  61.             viewMode : "2D",  //  是否为3D地图模式
  62.             zoom : 13,   // 初始化地图级别
  63.             center : [113.370824,23.131265], //中心点坐标  广州
  64.             resizeEnable: true,
  65.             willreadoften: true
  66.           });
  67.           //鼠标点击事件
  68.           this.map.on('click', this.clickMapHandler)
  69.           // 搜索提示插件
  70.           this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
  71.         }).catch(e => {
  72.           console.log(e);
  73.         });
  74.       }    
  75.     }
  76. }
  77. </script>

 2. 选取起点和终点

  1. // 点击地图事件
  2.       clickMapHandler(e){
  3.         //选择起点
  4.         if (this.isStart){
  5.           if (this.startMarker !== null){
  6.             this.map.remove(this.startMarker)
  7.           }
  8.           this.startCoordinate.lon = e.lnglat.getLng()
  9.           this.startCoordinate.lat = e.lnglat.getLat()
  10.           this.startCoordinateDescription = '经度：' + this.startCoordinate.lon + ',     纬度：' + this.startCoordinate.lat
  11.  
  12.           //标点
  13.           this.startMarker = new AMap.Marker({
  14.             position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
  15.             title: '起点',
  16.             label: {
  17.               content: '起点'
  18.             }
  19.           })
  20.           // 将创建的点标记添加到已有的地图实例
  21.           this.map.add(this.startMarker)
  22.         }
  23.         //选择终点
  24.         else {
  25.           if (this.endMarker !== null){
  26.             this.map.remove(this.endMarker)
  27.           }
  28.           this.endCoordinate.lon = e.lnglat.getLng()
  29.           this.endCoordinate.lat = e.lnglat.getLat()
  30.           this.endCoordinateDescription = '经度：' + this.endCoordinate.lon + ',     纬度：' + this.endCoordinate.lat
  31.  
  32.           this.endMarker = new AMap.Marker({
  33.             position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
  34.             title: '终点',
  35.             label: {
  36.               content: '终点'
  37.             }
  38.           })
  39.           this.map.add(this.endMarker)
  40.         }
  41.       }

3.搜索地址功能

  1. // 搜索地址
  2.       remoteMethod(query) {
  3.         if (query !== "") {
  4.           this.loading = true;
  5.           setTimeout(() => {
  6.             this.loading = false;
  7.             this.AutoComplete.search(query, (status, result) => {
  8.               this.options = result.tips;
  9.             });
  10.           }, 200);
  11.         } else {
  12.           this.options = [];
  13.         }
  14.       },
  15.       // 选中提示
  16.       currentSelect(val) {
  17.         // 清空时不执行后面代码
  18.         if (!val) {
  19.           return ;
  20.         }
  21.         // 自动适应显示想显示的范围区域
  22.         this.map.setFitView();
  23.         //清除marker
  24.         if (this.searchMarker){
  25.           this.map.remove(this.searchMarker)
  26.         }
  27.         //设置marker
  28.         this.searchMarker = new AMap.Marker({
  29.           map: this.map,
  30.           position: [val.location.lng, val.location.lat],
  31.         });
  32.  
  33.         this.keywords = val.name
  34.         //定位
  35.         this.map.setCenter([val.location.lng, val.location.lat])
  36.       }

4. 页面代码

  1. <template>
  2. <div class="app-container">
  3. <!--      表单-->
  4.       <div style="width: 70%;margin-left: 15%;">
  5.         <el-input v-model="form.name" placeholder="请输入路线名称" style="margin-bottom: 3px;">
  6.           <template slot="prepend"><label style="width: 120px;">路线名称</label></template>
  7.         </el-input>
  8.         <el-input :value="startCoordinateDescription" disabled style="; margin-bottom: 3px;">
  9.           <el-button slot="prepend" style="width: 120px; background: #13ce66; color: white" @click="isStart = true">选择起点</el-button>
  10.         </el-input>
  11.         <el-input :value="endCoordinateDescription" disabled>
  12.           <el-button slot="prepend" style="width: 120px; background: #cc3333; color: white" @click="isStart = false">选择终点</el-button>
  13.         </el-input>
  14.       </div>
  15. <!--      搜索组件-->
  16.       <div>
  17.         搜索：
  18.         <el-select
  19.           v-model="keywords"
  20.           filterable
  21.           remote
  22.           placeholder="请输入关键词"
  23.           :remote-method="remoteMethod"
  24.           :loading="loading"
  25.           :clearable="true"
  26.           size="mini"
  27.           @change="currentSelect"
  28.           style="width: 500px"
  29.         >
  30.           <el-option
  31.             v-for="item in options"
  32.             :key="item.id"
  33.             :label="item.name"
  34.             :value="item"
  35.             class="one-text"
  36.           >
  37.             <span style="float: left">{{ item.name }}</span>
  38.             <span style="float: right; color: #8492a6; font-size: 13px">{{
  39.                 item.district
  40.               }}</span>
  41.           </el-option>
  42.         </el-select>
  43.       </div>
  44. <!--      地图组件-->
  45.       <div id="guide-map" style="height: 500px;"></div>
  46.  
  47. </div>
  48. </template>

5. 全部代码

  1. <template>
  2. <div class="app-container">
  3. <!--      表单-->
  4.       <div style="width: 70%;margin-left: 15%;">
  5.         <el-input v-model="form.name" placeholder="请输入路线名称" style="margin-bottom: 3px;">
  6.           <template slot="prepend"><label style="width: 120px;">路线名称</label></template>
  7.         </el-input>
  8.         <el-input :value="startCoordinateDescription" disabled style="; margin-bottom: 3px;">
  9.           <el-button slot="prepend" style="width: 120px; background: #13ce66; color: white" @click="isStart = true">选择起点</el-button>
  10.         </el-input>
  11.         <el-input :value="endCoordinateDescription" disabled>
  12.           <el-button slot="prepend" style="width: 120px; background: #cc3333; color: white" @click="isStart = false">选择终点</el-button>
  13.         </el-input>
  14.       </div>
  15. <!--      搜索组件-->
  16.       <div>
  17.         搜索：
  18.         <el-select
  19.           v-model="keywords"
  20.           filterable
  21.           remote
  22.           placeholder="请输入关键词"
  23.           :remote-method="remoteMethod"
  24.           :loading="loading"
  25.           :clearable="true"
  26.           size="mini"
  27.           @change="currentSelect"
  28.           style="width: 500px"
  29.         >
  30.           <el-option
  31.             v-for="item in options"
  32.             :key="item.id"
  33.             :label="item.name"
  34.             :value="item"
  35.             class="one-text"
  36.           >
  37.             <span style="float: left">{{ item.name }}</span>
  38.             <span style="float: right; color: #8492a6; font-size: 13px">{{
  39.                 item.district
  40.               }}</span>
  41.           </el-option>
  42.         </el-select>
  43.       </div>
  44. <!--      地图组件-->
  45.       <div id="guide-map" style="height: 500px;"></div>
  46.  
  47. </div>
  48. </template>
  49. <script>
  50. import AMapLoader from "@amap/amap-jsapi-loader";
  51. // 设置安全密钥
  52. window._AMapSecurityConfig = {
  53.   securityJsCode: 'xxxxxxxxxxxxxxxxx',
  54. }
  55. export default {
  56.     mounted() {
  57.         this.initMap();
  58.     },
  59.     data(){
  60. 	  return {
  61. 		//提交表单
  62. 		form:{},		
  63.         //地图实例
  64.         map: null,
  65.         //路径坐标点集合
  66.         coordinateList: [],
  67.         //起点坐标
  68.         startCoordinate: {},
  69.         //终点坐标
  70.         endCoordinate: {},
  71.         //起点坐标描述
  72.         startCoordinateDescription: '经度：请选择起点' + ',     纬度：请选择起点' ,
  73.         //终点坐标描述
  74.         endCoordinateDescription: '经度：请选择终点' + ',     纬度：请选择终点',
  75.         //选择起点
  76.         isStart: true,
  77.         //起点Marker
  78.         startMarker: null,
  79.         //终点Marker
  80.         endMarker: null,
  81.         //搜索点Marker
  82.         searchMarker: null,
  83.         // 搜索提示
  84.         AutoComplete: null,
  85.         // 搜索关键字
  86.         keywords: "",
  87.         // 搜索节流阀
  88.         loading: false,
  89.         // 搜索提示信息
  90.         options: [],
  91.  
  92.       }
  93. 	},
  94.     methods: {
  95.         //初始化地图
  96.         initMap() {
  97.         AMapLoader.reset()
  98.         AMapLoader.load({
  99.           key: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
  100.           version: '2.0',   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  101.           plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Marker'],  // 需要使用的的插件列表
  102.           AMapUI: {
  103.             version: '1.1',
  104.             plugins: []
  105.           }
  106.         }).then((AMap)=>{
  107.           // 初始化地图
  108.           this.map = new AMap.Map('guide-map',{
  109.             viewMode : "2D",  //  是否为3D地图模式
  110.             zoom : 13,   // 初始化地图级别
  111.             center : [113.370824,23.131265], //中心点坐标  广州
  112.             resizeEnable: true,
  113.             willreadoften: true
  114.           });
  115.           //鼠标点击事件
  116.           this.map.on('click', this.clickMapHandler)
  117.           // 搜索提示插件
  118.           this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
  119.         }).catch(e => {
  120.           console.log(e);
  121.         });
  122.       },
  123.       // 点击地图事件
  124.       clickMapHandler(e){
  125.         //选择起点
  126.         if (this.isStart){
  127.           if (this.startMarker !== null){
  128.             this.map.remove(this.startMarker)
  129.           }
  130.           this.startCoordinate.lon = e.lnglat.getLng()
  131.           this.startCoordinate.lat = e.lnglat.getLat()
  132.           this.startCoordinateDescription = '经度：' + this.startCoordinate.lon + ',     纬度：' + this.startCoordinate.lat
  133.  
  134.           //标点
  135.           this.startMarker = new AMap.Marker({
  136.             position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
  137.             title: '起点',
  138.             label: {
  139.               content: '起点'
  140.             }
  141.           })
  142.           // 将创建的点标记添加到已有的地图实例
  143.           this.map.add(this.startMarker)
  144.         }
  145.         //选择终点
  146.         else {
  147.           if (this.endMarker !== null){
  148.             this.map.remove(this.endMarker)
  149.           }
  150.           this.endCoordinate.lon = e.lnglat.getLng()
  151.           this.endCoordinate.lat = e.lnglat.getLat()
  152.           this.endCoordinateDescription = '经度：' + this.endCoordinate.lon + ',     纬度：' + this.endCoordinate.lat
  153.  
  154.           this.endMarker = new AMap.Marker({
  155.             position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
  156.             title: '终点',
  157.             label: {
  158.               content: '终点'
  159.             }
  160.           })
  161.           this.map.add(this.endMarker)
  162.         }
  163.       },
  164.       // 搜索地址
  165.       remoteMethod(query) {
  166.         if (query !== "") {
  167.           this.loading = true;
  168.           setTimeout(() => {
  169.             this.loading = false;
  170.             this.AutoComplete.search(query, (status, result) => {
  171.               this.options = result.tips;
  172.             });
  173.           }, 200);
  174.         } else {
  175.           this.options = [];
  176.         }
  177.       },
  178.       // 选中提示
  179.       currentSelect(val) {
  180.         // 清空时不执行后面代码
  181.         if (!val) {
  182.           return ;
  183.         }
  184.         // 自动适应显示想显示的范围区域
  185.         this.map.setFitView();
  186.         //清除marker
  187.         if (this.searchMarker){
  188.           this.map.remove(this.searchMarker)
  189.         }
  190.         //设置marker
  191.         this.searchMarker = new AMap.Marker({
  192.           map: this.map,
  193.           position: [val.location.lng, val.location.lat],
  194.         });
  195.  
  196.         this.keywords = val.name
  197.         //定位
  198.         this.map.setCenter([val.location.lng, val.location.lat])
  199.       }
  200.     }
  201. }
  202. </script>

参考：vue对高德地图的简单使用：点击标记并获取经纬度和详细地址

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/215858
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号