vue使用高德地图的搜索地址和拖拽选址
站长
· 阅读数 283
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;
}