vue使用高德地图的搜索地址和拖拽选址

1、引入高德地图方式-NPM

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

2、vue中引入，用到所搜提示组件和拖拽选址，本人的经历是2.0版本是个傻逼垃圾坑，用默认的版本吧。

3、涉及组件：“AMap.Autocomplete”、‘misc/PositionPicker’、“AMap.PlaceSearch”、‘AMap.Geocoder’，后面两个暂时没用到，是所搜点和地理转码的，代码部分没用没删除，反正复制粘贴可以直接跑

//在vue的index.html中引入安全秘钥，官网有两种方式，我没服务器啥的用明文了
<script>window._AMapSecurityConfig = {securityJsCode:'秘钥',};
</script>AMapLoader.load({"key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填"version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": [],           // 需要使用的的插件列表，如比例尺'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)=>{map = new AMap.Map('container');
}).catch(e => {console.log(e);
})

<template><div><div style="margin-top: 20px"><div style="height:520px;"><div id="all" style="height:100%"><div class="posInput"><el-input style="width:100%"id="tipinput"class="form-control input-style"type="text"placeholder="请输入搜索地址"prefix-icon="el-icon-search"v-model="MapAdress"></el-input></div><div id="allmap"></div><div class="posSubmit"><el-form  ref="form"  label-width="85px" ><div class="btn_box" ><el-form-item label="地址坐标:" ><el-input style="width:400px" disabled class="form-control input-style" type="text" v-model="insureAdress"> </el-input></el-form-item><el-form-item label="签到地址:" ><el-input style="width:400px"  disabled class="form-control input-style" type="text" v-model="insureAdress2"> </el-input></el-form-item></div></el-form>    <el-button type="primary" size="large" style="margin-left:10px;" @click="insureMapAdress">确定</el-button></div></div></div></div></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';export default {name: 'demo',props:{adressData:{type:Object,default:()=>{}}},data() {return {map: null,marker:null,geocoder: null, // 地理编码与逆地理编码类，用于地址描述与坐标之间的转换startAutoComplete: null,startPlaceSearch: null,positionPicker:null,startSeacrh:[],stratInfo:{},thisPosition: {location: '',lng: '',lat: ''},mapinitCode:0,//地理编码:1;地理逆编码:2MapAdress:'',insureAdress:'',insureAdress2:''}},mounted() {//我这里的经纬度是从路由上带过来的，如果路由上有经纬度，取经纬度；//如果路由上没有经纬度，则取路由上带过来的详细地址（address）使用地理逆编码转换为经纬度定位到地图上//tips：使用地理逆编码，此时解析出的经纬度位置也应逆换// if(adressData.longitute){//      console.log("有经纬度")//         this.mapinitCode = 1;//        this.mapinit(105.602725,37.076636)//    }else{//        console.log("无经纬度")//         this.mapinitCode = 2;//        this.maplocal(this.$route.query.rowData.address)// }this.loadmap()},methods: {loadmap() {const that = thisreturn new Promise((reslove, reject) => {AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填// version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.ToolBar', 'AMap.Scale','AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等AMapUI: {// 是否加载 AMapUI，缺省不加载version: "1.1", // AMapUI 缺省 1.1plugins: [], // 需要加载的 AMapUI ui插件},}).then((AMap) => {that.map = new AMap.Map("allmap", {resizeEnable: true,zoom: 4,center: [116.397428, 39.90923],//中心点坐标// pitch: 4, // 地图俯仰角度，有效范围 0 度- 83 度})//给地图新增缩放条，和 地图左下角的海里控件that.map.addControl(new AMap.Scale())that.map.addControl(new AMap.ToolBar())// that.map.setMapStyle("amap://styles/blue")// that.map.setMapStyle("amap://styles/darkblue")// 地理编码与逆地理编码类，用于地址描述与坐标之间的转换that.geocoder = new AMap.Geocoder()//构造地点查询类 -开始AMap.plugin(["AMap.PlaceSearch", "AMap.Autocomplete"], function () {let autoOptions1 = { input: "tipinput", city: "全国" }that.startAutoComplete = new AMap.Autocomplete(autoOptions1)that.startPlaceSearch = new AMap.PlaceSearch({map: that.map,})that.startAutoComplete.on("select", that.handleStartSelect) //注册监听，当选中某条记录时会触发})// that.handlePositionPickerEvent() 实现地图拖拽选址功能that.map.setZoom(6)reslove()}).catch((e) => {console.log(e, "高德地图加载失败")reject(e)})})},handlePositionPickerEvent(){let that = this;AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {console.log('拖拽加载成功');that.positionPicker = new PositionPicker({// mode: 'dragMap',mode: 'dragMarker',map: that.map})that.positionPicker.on('success', function (positionResult) {console.log(positionResult,'positionResult');})that.positionPicker.on('fail', function (positionResult) {// 海上或海外无法获得地址信息})})},handleStartSelect(event){console.log(event, "起点经纬度 [lng,lat]")if (event.poi.location == "") {this.$message({type: "warning",message: "该地点无经纬度数据，请输入具体一点的地点!",duration: 5 * 1000,})return} if(this.marker){this.map.remove(this.marker)this.marker =null;}this.startSeacrh =[];this.stratInfo = {};this.startSeacrh = [event.poi.location.lng, event.poi.location.lat]this.stratInfo = {district: event.poi.district,address: event.poi.address,name: event.poi.name,}this.insureAdress = event.poi.district+event.poi.address+event.poi.namethis.insureAdress2 = '['+event.poi.location.lng+','+event.poi.location.lat+']'this.marker = new AMap.Marker({position: this.startSeacrh//位置})this.map.add(this.marker);//添加到地图// 传入经纬度，设置地图中心点this.map.setCenter(this.startSeacrh);// this.positionPicker.start(this.startSeacrh)  启动这句控制 地图出现一个maker点，可以移动// this.positionPicker.stop()   取消移动的makerthis.map.setZoom(15)},insureMapAdress(){//确定修改地址console.log(this.insureAdress)this.$confirm('此操作为修改地址, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let data = {}data.id=this.rowData.id;data.longitute = this.thisPosition.lngdata.latitude = this.thisPosition.latdata.address = this.insureAdress// updateCompanyAddress(data).then(res => {//  if(res.data.code ==  1){//        this.$message({//           message: '更新地址成功！',//          type: 'success'//         });//   }else{//        this.$message.error('修改失败');//    }// })})},maplocal (address){ //地理逆编码this.geocoder.getLocation(address, (status, result) => {console.log(address);if (status === 'complete' && result.geocodes.length) {console.log(result)const lnglat = result.geocodes[0].location;const lat = lnglat.lat;const lng = lnglat.lng;that.mapinit(lat, lng)  //tips：使用地理逆编码，此时解析出的经纬度位置也应逆换} else {console.log(result)}});},},}
</script>

#all{position: relative;}#allmap{width: 100%;  height: calc(100%  - 50px);font-family: "微软雅黑";}.posInput{position: absolute;   z-index: 1;width: 80%;margin-top: 20px;  margin-left: 10%;}.posSubmit{position: absolute; z-index: 1; bottom: 0;margin-left: 5%;width: 90%;display: flex;  justify-content: flex-start; align-items: center;}.btn_box{width: 100%;height: 100%;display: flex;  ; align-items: center;}::v-deep .el-form-item{margin-bottom: 0 !important;}

vue使用高德地图的搜索地址和拖拽选址相关推荐

vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称
问题记录 vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称官方文档及示例 DragRoute相关API API中没有任何方法让我 ...
vue集成高德地图后搜索按钮国际化的问题
这里就不详细介绍 vue如何集成高德地图了, 如有问题请参考:https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install 咱先说下 ...
移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址
效果图: 在public文件夹下的index.html文件中head标签下加上script标签如下: <script type="text/javascript">wi ...
vue使用高德地图搜索地址添加标记marker,定位，拖拽选址功能
目录 JSAPI 的加载使用 JSAPI Loader (推荐) 实现效果: 需求:点击输入框弹窗地图弹窗,输入框输入地址模糊搜索列表结果,点击列表添加相应得marker标记,并且添加标记拖拽选址功 ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue 使用高德地图（vue-amap）记录
vue 使用高德地图 (vue-amap)记录效果图第一步下载vue-amap依赖: npm install vue-amap --save 高德地图ui:https://lbs.amap.co ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...

vue使用高德地图的搜索地址和拖拽选址

vue使用高德地图的搜索地址和拖拽选址相关推荐

最新文章

热门文章