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;}
