关于前端:vue使用高德地图的搜索地址和拖拽选址

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

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

2、自己的经验是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;天文逆编码:2                MapAdress:'',                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 = this        return new Promise((reslove, reject) => {            AMapLoader.load({            key: "", // 申请好的Web端开发者Key，首次调用 load 时必填            // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15            plugins: [               'AMap.ToolBar', 'AMap.Scale','AMap.Geocoder'            ], // 须要应用的的插件列表，如比例尺'AMap.Scale'等            AMapUI: {                // 是否加载 AMapUI，缺省不加载                version: "1.1", // AMapUI 缺省 1.1                plugins: [], // 须要加载的 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.name            this.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()   勾销挪动的maker           this.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.lng                    data.latitude = this.thisPosition.lat                    data.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;    }