vue引入高德地图定位+拖拽选址+搜索定位

接地图步骤：准备工作step1：安装依赖；cnpm install vue-amap --save 引入AMap申请key：在高德地图开放平台https://lbs.amap.com/dev/key/app控制台-应用管理-我的应用-新增应用，申请一个key1、在index.html里引入<script src="//

zlfjavahome

3766人浏览 · 2022-03-14 09:58:43

zlfjavahome · 2022-03-14 09:58:43 发布

接地图步骤：

准备工作
step1：安装依赖；cnpm install vue-amap --save 引入AMap
申请key：在高德地图开放平台https://lbs.amap.com/dev/key/app控制台-应用管理-我的应用-新增应用，申请一个key

1、在index.html里引入

<script src="//webapi.amap.com/maps?v=1.4.13&key=3764a11b28b71df809bdb998a9bb6278"></script>

<script src="//webapi.amap.com/ui/1.0/main.js"></script>

2、在vue cli2.0版本情况下
在build文件夹下的webpack.base.config.js配置,写在"module.exports={}’'里最底下，与"entry{}"平级

在vue cli3.0版本情况下
在vue.config.js配置,写在"module.exports={}“里配置
configureWebpack: {
externals: {
'AMap': 'AMap',
'AMapUI': 'AMapUI'
}
},

3、在assert文件夹里新建一个AMap.js：
export default function MapLoader () {
return new Promise((resolve, reject) => {
if (window.AMap) {
resolve(window.AMap)
} else {
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=3764a11b28b71df809bdb998a9bb6278 '
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
resolve(window.AMap)
}
})
}

4、在使用了用地图的组件中引入AMap，
import AMap from 'AMap'
import MapLoader from '../../../assets/AMap.js';

5、地图vue代码：
<template>
<a-modal
:title="title"
:width="800"
:visible="visible"
:confirmLoading="confirmLoading"
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<div style="height:600px;border:1px solid #dddddd;">
<p style="background-color: #eff5ff;padding: 8px;color: #01AAED;font-size: 16px">经纬度设置,找到位置,点击确定即可</p>
<div id="all" style="height:100%">
<div class="posInput">
<a-input-search style="width:100%"
id="tipinput"
class="form-control input-style"
type="text"
placeholder="请输入搜索地址"
v-model="MapAdress"
@search="inputMapAdress">
</a-input-search>
</div>
<div id="allmap"></div>
<div class="posSubmit">
<a-input style="width:100%"
id="insureinput"
class="form-control input-style"
type="text"
v-model="insureAdress">
</a-input>
</div>
</div>
</div>

</a-spin>
</a-modal>
</template>

import MapLoader from '../../../../assets/AMap.js';

export default {
name: 'demo',
data() {
return {
title: "选择房源地址",
visible: false,
confirmLoading: false,
map: null,
thisPosition: {
location: '',
lng: '',
lat: '',
province: '',
city: '',
county: '',
street: '',
streetId: '',
},
MapAdress: '',
insureAdress: '',
}
},
methods: {
openMap(addData) {
this.visible = true;
if (addData.lng && addData.lat) {
console.log("按照经纬度渲染")
this.mapinit(addData.lng, addData.lat)
} else if (addData.addr) {
console.log("按照详细地址渲染")
this.maplocal(addData.addr)
} else {
this.currentSite();
}
},
handleOk() {
console.log(this.insureAdress);
let that = this;
this.$confirm({
title: '提示',
content: '此操作为修改地址, 是否继续?',
onOk() {
that.$emit('ok', that.thisPosition);
that.close();
},
onCancel() {
},
});

},
handleCancel() {
this.close()
},
close() {
this.$emit('close');
this.visible = false;
},
inputMapAdress(e) {
console.log(e)
this.MapAdress = e
},

mapMarker(longitute, latitude) { //指针
let that = this
//加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {
var map = new AMap.Map('allmap', {
zoom: 16
})

// 传入经纬度，设置地图中心点
var position = new AMap.LngLat(longitute, latitude); // 标准写法
map.setCenter(position);

AMap.event.addListener(autocomplete, "select", function (e) {
//TODO 针对选中的poi实现自己的功能
console.log(e, e.poi.district, e.poi.address, e.poi.location.lng)
that.thisPosition.lng = e.poi.location.lng
that.thisPosition.lat = e.poi.location.lat
that.insureAdress = e.poi.district + e.poi.address
console.log(that.insureAdress)
var map = new AMap.Map('allmap', {
zoom: 16
})
var position = new AMap.LngLat(e.poi.location.lng, e.poi.location.lat); // 标准写法
map.setCenter(position);
that.mapMarker(e.poi.location.lng, e.poi.location.lat)

});
});
that.mapMarker(longitute, latitude)
})

},
maplocal(address) { //地理逆编码
let that = this
MapLoader().then(AMap => {
AMap.plugin(['AMap.Geocoder'], function () {
let geocoder = new AMap.Geocoder();
geocoder.getLocation(address, (status, result) => {
console.log(address);
if (status === 'complete' && result.geocodes.length) {
console.log(result)
const lnglat = result.geocodes[0].location;

}
</script>

#allmap {
width: 100%;
height: calc(100% - 30px);
font-family: "微软雅黑";
border: 1px solid pink;
}

.posInput {
position: absolute;
z-index: 1;
width: 80%;
margin-top: 20px;
margin-left: 10%;
}

.posSubmit {
position: absolute;
z-index: 1;
bottom: 56px;
margin-left: 10%;
width: 80%;
display: flex;
justify-content: flex-start;
align-items: center;
}
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^