共计 5934 个字符，预计需要花费 15 分钟才能阅读完成。
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;}
正文完
