element+高德地图使用地址定位查询

思路：用下可搜索拉框，监听输入值调用地图接口获取地址列表渲染到下拉选项中，对下拉选项绑定点击事件（需要加.nataive），获取到经纬度标记到地图上，点击地图点位时逆向解析经纬度获取到点击的地址弄成数组回显给下拉框选项。

 <el-select size="small"  ref="selectAddress" v-model="formData.address"    filterable  remote    reserve-keyword     placeholder="请输入地址"   :remote-method="getAddress"  :loading="mapLoading"><el-option  v-for="item in addressList"  :key="item.id" :label="item.name" @click.native="getPoint(item.location)"  :value="item.name"> </el-option></el-select>
<tableMap class="map" @getLngLat='getLngLat'          @usePoinggetAddressList='usePoinggetAddressList'    @getAddressList='getAddressList'   :centerPoint='centerPoint' ref="tableMap"></tableMap>mapLoading:false,  addressList:[],   //下拉选项// 获取地址getAddress(val) {this.mapLoading=true;this.$refs.tableMap.onSubmit(val);},// 获取下拉框的选中地址的经纬度getPoint(location){if(location && location.lat && location.lng){this.$refs.tableMap.getpoint([location.lng,location.lat]);this.formData.longitude =location.lng;this.formData.latitude =location.lat;this.formData = JSON.parse(JSON.stringify(this.formData));}},getLngLat(arr) {// this.formData.longitude = arr[0];// this.formData.latitude = arr[1];// this.formData = JSON.parse(JSON.stringify(this.formData));},// 获取地址下拉框数据getAddressList(list){//   this.$nextTick(_ => { this.$refs.selectAddress.toggleMenu(); })this.addressList=list;this.mapLoading=false;},// 点击地图根据经纬度获取地址打开下拉弹框usePoinggetAddressList(list){this.addressList=list;this.$nextTick(_ => { this.$refs.selectAddress.toggleMenu(); })},

下面是地图组件的代码

<template><div id="container" style="width: 100%;height: 400rem"></div>
</template><script>import AMapLoader from '@amap/amap-jsapi-loader';export default {props: ['centerPoint'],data() {return {map: null,marker: null,name: null,addressInfo: {},center: ['90.2882614', '43.8482728'], //默认一个经纬度}},created() {this.init();},watch: {centerPoint(newval, oldval) {if (newval && newval[0] && newval[1]) {this.center = newval;this.init();}}},methods: {onSubmit(val) {let that = this;let keywords = val;AMap.plugin('AMap.PlaceSearch', function () {var autoOptions = {city: '全国'}var placeSearch = new AMap.PlaceSearch(autoOptions);placeSearch.search(keywords, function (status, result) {if (result.info == 'OK') {if (result.poiList.pois.length && result.poiList.pois.length > 0) {that.$emit('getAddressList', result.poiList.pois)} else {that.$notify({title: '未查询到',message: '暂未查询到搜索数据',type: 'success',duration: 900,position: 'top-left',});}} else {}// 搜索成功时，result即是对应的匹配数据// console.log(result,999)})})},getpoint(arr) {this.center = arr;this.map.setZoomAndCenter(11, this.center)this.addMarker()},init() {AMapLoader.load({key: "",  //自己申请的keyversion: "2.0",}).then((AMap) => {this.map = new AMap.Map("container", {center: this.center,zoom: 11,  //地图放大数mapStyle: 'amap://styles/23053052765164595eb5c6cdff6cc98b'   //地图样式});this.map.on('click', this.showInfoClick);if (this.centerPoint && this.centerPoint[0] && this.centerPoint[1]) {this.addMarker();}}).catch((e) => {console.log(e);});},// 实例化点标记addMarker() {if (this.marker) {this.marker.setMap(null);this.marker = null;}this.marker = new AMap.Marker({icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: this.center,offset: new AMap.Pixel(-23, -55)});this.marker.setMap(this.map);},showInfoClick(e) {let lnglat = [e.lnglat.lng, e.lnglat.lat]let that = this;AMap.plugin('AMap.Geocoder', function () {var geocoder = new AMap.Geocoder({// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycodecity: '全国'})geocoder.getAddress(lnglat, function (status, result) {if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息let addressList = [{name: result.regeocode.formattedAddress,id:that.$makeRandom(1,1000),location: {lat: e.lnglat.lat,lng: e.lnglat.lng}}];that.$emit('usePoinggetAddressList', addressList)}})})},}}
</script><style scoped lang='less'>
.box{position: relative;.search{position: absolute; top: 0; z-index: 99;}
}</style>

element+高德地图使用地址定位查询相关推荐

高德地图根据地址获取经纬度(JS)
高德地图根据地址获取经纬度(JS) <script type="text/javascript" src="https://webapi.amap.com/maps ...
在vue中使用高德地图的下属省市区查询，实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围一.先上效果图二.高德地图Vue引用一.先上效果图二.高德地图Vue引用 1. webpack引入高德在webpack.b ...
vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情
PC端高德地图使用步骤: 1.注册并登录高德开放平台获取 2.安装高德依赖(amap-jsapi-loader) 3.初始化地图 4.首次打开地图获取当前定位并标记 5.根据已有地址自动定位到指定地址 ...
js应用高德地图API精确定位到门牌号标注并输出当前地址和经纬度
主要就是两个方法,逆地址解析和地址解析过程,以及Chrome只支持https的定位. <head><meta charset="utf-8"><met ...
uniapp+高德地图api 获取定位信息及详细地址
引入高德地图js api 高德地图api官方文档根据官方文档建议,我使用的是JSAPI Loader 并且是通过npm安装的 npm i @amap/amap-jsapi-loader --save ...
高德地图--SDK集成--定位功能地图定位搜索
最近项目需要到高德定图定位,就此记录下简单集成思路下载文件之只放了libs和主要代码文件 https://download.csdn.net/download/qq_38355313/1035261 ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
Android 通过高德地图获取地址的经纬度
不废话,需求:输入一个地址,获取到它的经纬度,怎么办? 1.到高德开放平台申请,获取key 高德开放平台:https://lbs.amap.com/ 2.下载高德定位及地址搜索SDK:https:// ...
iOS获取高德地图实现持续定位功能
首先,根据高德地图开发平台在Xcode里面配置相应的环境自动部署用cocoapods,请按照http://lbs.amap.com/api/ios-location-sdk/guide/create ...

element+高德地图使用地址定位查询

element+高德地图使用地址定位查询相关推荐

最新文章

热门文章

element+高德地图 使用地址定位查询

element+高德地图 使用地址定位查询相关推荐

最新文章

热门文章

element+高德地图使用地址定位查询

element+高德地图使用地址定位查询相关推荐