效果图：
1.首先，下载vue-amap 插件
2.在main.js中引入：
import VueAMap from 'vue-amap'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '你自己的key!!!',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geocoder','AMap.Geolocation','AMap.MarkerClusterer'],
// 默认高德 sdk 版本为 1.4.4
v: '1.4.4'
});3.在index.html中引入：
<script type="text/javascript" src="https://webapi.amap.com/maps?key=你自己的key!!!&v=1.4.4&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MapType,AMap.PolyEditor,AMap.Geocoder,AMap.CircleEditor"></script> 代码：
<template>
<div class="amap-page-container" style="width: 600px; height:300px;margin:30px 10%;">
<el-amap-search-box
class="search-box"
:search-option="searchOption"
:on-search-result="onSearchResult"
></el-amap-search-box>
<el-amap
ref="map"
:vid="workId"
:amap-manager="amapManager"
:center="center"
:zoom="zoom"
:plugin="plugin"
:events="events"
class="amap-demo"
>
</el-amap>
<!-- <p>{{ address }}</p>
<p>{{ center }}</p> -->
<div class="footer">
<Input class="lineinput" v-model.number="lng" disabled></Input>
<Input class="lineinput" v-model.number="lat" disabled></Input>
<Input class="lineinput" v-model="address" disabled></Input>
</div>
<div class="drawer-footer">
<Button type="text" @click="cancel">{{ $t("cancel") }}</Button>
<Button type="primary" @click="findlocation">{{
$t("sure")
}}</Button>
</div>
</div>
</template>
<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
props:{
workId:String
},
data() {
const self = this;
return {
locData: {
longitude: "",
latitude: "",
address: "",
province:"",
city:"",
district:""
},
searchOption: {
city: "",//搜索范围
citylimit: false, //限制搜索范围
//city: "", citylimit: false, // 不限制搜索范围搜索，比如想全国搜索
},
lng: "",
lat: "",
address: "",
province:"",
city:"",
district:"",
marker: "",
amapManager,
zoom: 12,
center: [121.59996, 31.197646],
amapamapDemo:'amapamapDemo',
events: {
init: (o) => {
o.getCity((result) => {
// console.log(result);
// this.searchOption.city=result.city
});
},
moveend: () => {},
zoomchange: () => {},
click: (e) => {
// console.log(e.lnglat);
self.lng = e.lnglat.lng;
self.lat = e.lnglat.lat;
self.center = [self.lng, self.lat];
// console.log(e.lnglat, 1999);
let o = amapManager.getMap();
if (!self.marker) {
self.marker = new AMap.Marker({
position: e.lnglat,
});
self.marker.setMap(o);
}
self.marker.setPosition(e.lnglat);
let geocoder = new AMap.Geocoder({});
geocoder.getAddress(e.lnglat, function (status, result) {
if (status === "complete" && result.regeocode) {
self.address = result.regeocode.formattedAddress;
self.province=result.regeocode.addressComponent.province
self.city=result.regeocode.addressComponent.city
self.district=result.regeocode.addressComponent.district
if(self.city==""){
self.city=self.province
}
console.log('self',self.province,self.city,self.district);
// console.log(self.address, "999地址");
} else {
log.error("根据经纬度查询地址失败");
}
});
},
},
plugin: [
"ToolBar",
{
pName: "MapType",
defaultType: 0,
events: {
init(o) {
// console.log(o);
},
},
},
],
plugin: [
{
pName: "Geolocation",
events: {
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
// console.log(JSON.stringify(result));
if (result && result.position) {
self.lng = result.position.lng;
self.lat = result.position.lat;
self.address = result.formattedAddress;
self.center = [self.lng, self.lat];
// console.log(self.center, 99666);
let o = amapManager.getMap();
if (!self.marker) {
self.marker = new AMap.Marker({
position: self.center,
});
self.marker.setMap(o);
}
self.marker.setPosition(self.center);
}
});
},
},
},
],
};
},
methods: {
onSearchResult(pois) {
console.log('pois',pois);
if (pois.length > 0) {
let { lng, lat, name ,location} = pois[0];
this.searchName=pois[0].name
let center = [lng, lat];
this.lng = lng;
this.lat = lat;
this.center = [lng, lat];
let o = amapManager.getMap();
if (!this.marker) {
this.marker = new AMap.Marker({
position: center,
});
this.marker.setMap(o);
}
this.marker.setPosition(center);
// 近来补充 根据经纬度查询地址
let geocoder = new AMap.Geocoder({});
let that = this
geocoder.getAddress(location, function(status, result) {
console.log(status, result)
if (status === "complete" && result.regeocode) {
that.address = result.regeocode.formattedAddress;
that.province=result.regeocode.addressComponent.province
that.city=result.regeocode.addressComponent.city
that.district=result.regeocode.addressComponent.district
if(that.city==""){
that.city=that.province
}
console.log('that',that.province,that.city,that.district);
} else {
console.log("根据经纬度查询地址失败");
}
});
}
},
//取消
cancel() {
this.lng = "";
this.lat = "";
this.address = "";
this.searchOption.city=""
// map.clearOverlays();
},
findlocation() {
// console.log('this.lng,this.lat,this.address',this.lng,this.lat,this.address);
this.locData.longitude=this.lng
this.locData.latitude=this.lat
this.locData.address=this.address
this.locData.province=this.province
this.locData.city=this.city
this.locData.district=this.district
this.$emit("findlocdata", this.locData);
this.lng = "";
this.lat = "";
this.address = "";
this.searchOption.city=""
// map.clearOverlays();
},
},
};
</script>
<style scoped lang="less">
.search-box {
position: absolute;
top: 25px;
left: 20px;
}
.amap-page-container {
position: relative;
/* margin-bottom: 20px; */
}
.footer {
margin-top: 10px;
text-align: center;
width: 600px;
}
.drawer-footer {
margin-top: 10px;
text-align: right;
position: relative;
border: 0;
}
.lineinput ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text ivu-input-wrapper-disabled{
width: 100%!important;
}
/deep/.amap-copyright {
display: none !important;
}
/deep/.amap-logo {
display: none!important;
}
</style>
根据经纬度回显坐标：
<template>
<div class="myIndexWrap">
<!-- 根据地址信息显示地图位置 -->
<div class="addrMapWrapper">
<div class="addrWrapper">
<!-- <estimated-info class="showMapBox" :center="displayData" :labelInfo="preMessage"/> -->
<!-- <estimated-info class="showMapBox"/> -->
<div class="showMapWrapper">
<el-amap
vid="maprun"
:zoom="zoom"
:plugin="plugin"
:events="events"
:center="center"
>
<el-amap-marker vid="marker" :position="center">
</el-amap-marker>
</el-amap>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
center:Array,
},
components: {
// estimatedInfo
},
data() {
return {
isResue:true,
geocoder: '',
//插件集合
plugin: [
// 工具条
{
pName: "ToolBar",
positon: "LB"
},
],
events: {
},
zoom: 18,
loaded: false,
markers:[ ],
};
},
methods:{
init(map) {
// 这里通过高德 SDK 完成。
this.geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all",
city: "全国"
});
},
},
computed:{
},
mounted(){
this.getMapList()
this.init()
},
activated(){
},
watch: {
};
</script>
<style scoped lang="less">
.myIndexWrap {
// width: 900px;
// min-width: 1000px;
height: auto;
display: flex;
flex-flow: column;
// h3 {
// padding-left: 50px;
// }
// 地图标记
.addrMapWrapper {
.addrWrapper{
margin-left: 100px;
}
}
}
/deep/.amap-copyright {
display: none !important;
}
/deep/.amap-logo {
display: none!important;
}
.showMapWrapper {
width: 900px;
height: 400px;
// border: 1px solid #999;
}
/deep/.amap-copyright {
display: none !important;
}
/deep/.amap-logo {
display: none!important;
}
/deep/.amap-marker-label {
// position: absolute;
z-index: 2;
background-color: white;
white-space: nowrap;
cursor: default;
padding: 3px;
font-size: 12px;
line-height: 14px;
border: 0;
}
</style>