VUE——自动定位+拖拽选址+搜索选址

简介:

地图加载完成后,进行自动定位到设备当前所在位置(显示当前周边),拖拽地图进行选择地址,点击搜索按钮,搜索框内输入时会提示相关点,通过搜索结果进行搜索选择地址

组件部分:

< template >
< div >
< button  @click="addRadius" >增加范围 </ button >
< button  @click="startSearch" >搜索 </ button >
< p >{{address}} </ p >
< hr >
< div  class= "amap-page-container" >
< input  v-if="toSearch"  type= "text"  class= "search-input"  id= "search" >
< el-amap
vid= "amap"
:zoom="zoom"
class= "amap-demo"
:center="center"
:amapManager="amapManager"
:events="events"
>
< el-amap-circle
vid= "circle"
:center="center"
:radius="radius"
fill-opacity= "0.2"
strokeColor= "#38f"
strokeOpacity= "0.8"
strokeWeight= "1"
fillColor= "#38f"
>
</ el-amap-circle >
</ el-amap >
</ div >
< ul >
< li  v-for="item  in result"  :key="item.id" >{{item.name}} </ li >
</ ul >
</ div >
</ template >

注:el-amap-circle只是为了更直观的看到效果,可以省略。

< style  scoped >
.amap-page-container {
height300px;
position: relative;
}
.search-input{
border1px solid red;
position: absolute;
z-index5;
width80%;
left10%;
padding5px;
}
.toolbar{
margin-top15px;
}
</ style >

js部分:

< script >
import {AMapManager}  from  "vue-amap"
let amapManager= new AMapManager();
export  default {
data() {
let vm =  this;
return {
zoom: 16,
center: [ 121.329402, 31.228667],
result:[],
address: "",
radius: 100,
toSearch: false,
amapManager,
map: null,
events:{
init(o){
vm.map=o;
//方法一
// AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
// var positionPicker = new PositionPicker({
// mode: 'dragMap',
// map: o
// });
// positionPicker.on('success', function(positionResult){
// vm.result=positionResult.regeocode.pois;
// vm.address=positionResult.regeocode.formattedAddress;
// vm.center=[positionResult.position.lng,positionResult.position.lat]
// })
// positionPicker.start();
// })
}
}
};
},
watch:{
map: function(){
if( this.map!= null){
this.startDrag();
}
}
},
methods:{
startDrag(){ //方法二
let vm= this;
let map= this.amapManager.getMap();
AMapUI.loadUI([ 'misc/PositionPicker'],  function(PositionPicker) {
var positionPicker =  new PositionPicker({
mode:  'dragMap',
map: map
});
//定位
let geolocation;
map.plugin( 'AMap.Geolocation'function () {
geolocation= new AMap.Geolocation({
showButton:  true//显示定位按钮,默认:true
showMarker:  false//定位成功后在定位到的位置显示点标记,默认:true
extensions: 'all'
})
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation,  'complete'function(data){
positionPicker.start();
}); //返回定位信息
})
positionPicker.on( 'success'function(positionResult){
vm.result=positionResult.regeocode.pois;
vm.address=positionResult.regeocode.formattedAddress;
vm.center=[positionResult.position.lng,positionResult.position.lat]
})
positionPicker.on( 'fail'function(failResult){
console.log(failResult)
})
// positionPicker.start();
})
},
addRadius(){
this.radius+= 10;
},
startSearch() {
let vm= this;
let map= this.amapManager.getMap();
this.toSearch= true;
AMapUI.loadUI([ 'misc/PoiPicker'],  function(PoiPicker) {
var poiPicker =  new PoiPicker({
input:  'search'//输入框id
});
//监听poi选中信息
poiPicker.on( 'poiPicked'function(poiResult) {
//用户选中的poi点信息
vm.center=[poiResult.item.location.lng,poiResult.item.location.lat]
});
});
},
}
};
</ script >

说明:

    拖拽选点使用的是UI组件里面的misc/PositionPicker,new一个positionPicker实例,对拖拽进行配置,可以选择拖拽地图还是marker,具体配置请自行参照参考手册点击打开链接,此处以拖拽地图为例,

positionPicker实例有success方法和fail方法,分别对应拖拽选址成功和失败,返回的参数为拖拽后的地址以及周边,失败信息。
定义好后,positionPicker.start(),则可以开始拖拽(若不调用开始方法,则无法进行拖拽)
有两种写法(JS中已经给注释)
1,地图加载完成后,即在init方法中,直接进行定义
2,地图init完成后  记录当前map实例,监控map实例,若map初始化完成,则调用方法,进行相关操作
此处以第2中为例

监控map实例,当map实例存在时,将中心点定位到当前设备所在地点,定位成功后启动拖拽选择功能

拓展:

若只使用定位功能

可以在el-amap上绑定plugin属性,

:plugin="plugin"

在data中进行定位插件绑定,配置定位的参数

// plugin: [{ //方法一
// pName: 'Geolocation',
// events: {
// init(o) {
// // o 是高德地图定位插件实例
// o.getCurrentPosition((status, result) => {
// console.log(status);
// console.log(result);
// if (result && result.position) {
// self.lng = result.position.lng;
// self.lat = result.position.lat;
// self.center = [self.lng, self.lat];
// self.loaded = true;
// self.$nextTick();
// }
// });
// }
// }
// }]


搜索

此处使用的是UI组件里面的'misc/PoiPicker' new一个PoiPicker实例并绑定搜索框,选中的搜索出来的某一条结果,讲改结果的经纬路设为中心点,即可实现搜索选择地址的效果

效果如下:


此案例的git地址:前往git

原文发布时间:
原文作者:kindCoder
本文来源CSDN博客如需转载请紧急联系作者

相关文章
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
104 0
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
128 17
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
71 1
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
80 0
|
3月前
|
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
323 4
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
215 77
Vue 文件批量下载组件封装完整使用方法及优化方案解析
本文详细介绍了批量下载功能的技术实现与组件封装方案。主要包括两种实现方式:**前端打包方案(基于file-saver和jszip)** 和 **后端打包方案**。前者通过前端直接将文件打包为ZIP下载,适合小文件场景;后者由后端生成ZIP文件流返回,适用于大文件或大量文件下载。同时,提供了可复用的Vue组件`BatchDownload`,支持进度条、失败提示等功能。此外,还扩展了下载进度监控和断点续传等高级功能,并针对跨域、性能优化及用户体验改进提出了建议。可根据实际需求选择合适方案并快速集成到项目中。
143 17
Vue 手风琴实现的三种常用方式及长尾关键词解析
手风琴效果是Vue开发中常见的交互组件,可节省页面空间、提升用户体验。本文介绍三种实现方式:1) 原生Vue结合数据绑定与CSS动画;2) 使用Element UI等组件库快速构建;3) 自定义指令操作DOM实现独特效果。每种方式适用于不同场景,可根据项目需求选择。示例包括产品特性页、后台菜单及FAQ展示,灵活满足多样需求。附代码示例与资源链接,助你高效实现手风琴功能。
101 10
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问