地图插件文档:https://elemefe.github.io/vue-amap/#/
下载引入插件
npm install --save vue-amap
在main全局引用插件
// 引入vue-amap
import VueAMap from 'vue-amap';
// 初始化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','Geocoder'],
// 高德 sdk 版本,默认为 1.4.4
v: '1.4.4'
});
写一个地图组件 views/components/gd-map.vue 方便项目中多处使用
<template>
<div class="amap-page-container">
<el-amap-search-box
class="search-box"
:search-option="searchOption"
:on-search-result="onSearchResult"
></el-amap-search-box>
<div class="map-content">
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:events="events"
:center="center"
expandZoomRange="true"
:zoom="zoom"
:plugin="plugins"
:pitch="66"
>
<el-amap-marker :position="center" :icon="icon" :title="address">
</el-amap-marker>
</el-amap>
</div>
<div class="toolbar">
position: [{{ lng }}, {{ lat }}] address: {{ address }}
</div>
</div>
</template>
<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
props: {
locationInfo: {
type: Object,
default: null,
},
changeCall: {
type: Function,
default: null,
},
},
data() {
let self = this;
return {
amapManager,
zoom: 12,
center: [117.121024, 36.654143],
address: "",
searchOption: {
city: "",
citylimit: true,
},
markers: [
// [121.59996, 31.197646],
// [121.40018, 31.197622],
// [121.69991, 31.207649]
],
events: {
click(e) {
let { lng, lat } = e.lnglat;
self.lng = lng;
self.lat = lat;
// 这里通过高德 SDK 完成。
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all",
});
geocoder.getAddress([lng, lat], function (status, result) {
if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) {
self.center = [self.lng, self.lat];
self.address = result.regeocode.formattedAddress;
self.$nextTick();
self.locationChange();
}
}
});
},
},
lng: 0,
lat: 0,
plugins: [
{
enableHighAccuracy: true, //是否使用高精度定位,默认:true
timeout: 100, //超过10秒后停止定位,默认:无穷大
maximumAge: 0, //定位结果缓存0毫秒,默认:0
convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
showButton: true, //显示定位按钮,默认:true
buttonPosition: "LB", //定位按钮停靠位置,默认:'LB',左下角
showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
panToLocation: false, //定位成功后将定位到的位置作为地图中心点,默认:true
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:f
extensions: "all",
//地图定位按钮
pName: "Geolocation",
init(o) {
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
console.log(result);
debugger;
if (result && result.position) {
self.lng = result.position.lng;
self.lat = result.position.lat;
self.center = [self.lng, self.lat];
self.loaded = true;
self.$nextTick();
}
});
},
},
],
icon: null,
};
},
created() {
if (this.locationInfo) {
this.iocn = this.locationInfo.iocn;
this.name = this.locationInfo.name;
this.address = this.locationInfo.address;
this.lng = this.locationInfo.longitude;
this.lat = this.locationInfo.latitude;
this.center = [this.lng, this.lat];
} else {
var Geolocation = new AMap.Geolocation({
radius: 1000,
extensions: "all",
});
}
},
methods: {
locationChange() {
if (this.changeCall) {
this.changeCall(this.address, this.lng, this.lat);
}
},
onSearchResult(pois) {
let latSum = 0;
let lngSum = 0;
if (pois.length > 0) {
pois.forEach((poi) => {
let { lng, lat } = poi;
lngSum += lng;
latSum += lat;
this.markers.push([poi.lng, poi.lat]);
});
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length,
};
this.center = [center.lng, center.lat];
}
},
},
};
</script>
<style>
.amap-page-container {
width: 100%;
height: 500px;
}
.search-box {
position: absolute;
top: 65px;
left: 20px;
}
.map-content {
height: 90%;
}
</style>
在使用页面引入组件
import gdMap from '@/views/components/gd-map'
export default {
// 注册组件
components: {gdMap}
}
页面调用进行选点获取经纬度信息
<div>
<!-- v-if="" 此处如果是弹窗显示的话,需要加一个判断打开或关闭的判读,进行对地图的重新渲染 -->
<gdMap :changeCall="changeAddressCall" :locationInfo="locationInfo"></gdMap>
</div>
<script>
import gdMap from '@/views/components/gd-map'
export default {
// 注册组件
components: {gdMap},
data() {
return {
form:{},
// 默认初始化显示的坐标
locationInfo:{
iocn:"",
name:"",
longitude:"", // 经度
latitude:"", // 纬度
address:"" // 地址
}
}
},
methods: {
// 获取经纬度,地址信息回调方法
changeAddressCall(address,lng,lat){
this.form.address=address;
this.form.longitude=lng;
this.form.latitude=lat;
},
}
}
</script>
table中根据经纬度弹出Dialog 地位位置信息
dialog地图信息组件 showMapDialog
<template>
<el-dialog
:title="title"
:visible.sync="isShow"
:width="width"
:before-close="handleClose"
@closed="closed"
>
<gdMap :locationInfo="showLocationInfo"></gdMap>
</el-dialog>
</template>
<script>
import gdMap from "@/views/components/gd-map";
export default {
components: {
gdMap,
},
data() {
return {
isShow: this.value,
showLocationInfo: this.locationInfo,
};
},
props: {
locationInfo: {
type: Object,
default: null,
},
title: {
type: String,
default: null,
},
transactionGroupType: {
type: String,
default: null,
},
value: {
type: Boolean,
default: false,
},
width: {
type: String,
default: "60%",
},
}, // 图片数组数据
created() {
this.locationInfo;
debugger;
},
mounted() {},
methods: {
opened() {},
closed() {
this.$emit("input", false);
},
handleClose() {
this.isShow = false;
},
},
};
</script>
<style>
</style>
页面中根据经纬度显示地图使用
在main中进行全局注册
import showMapDialog from '@/views/components/showMapDialog'
Vue.component('showMapDialog', showMapDialog)
页面使用
<template>
<div class="app-container">
<div>
<el-button size="mini" type="info" class="el-icon-map-location" @click="showMpDialog(row)">显示地图</el-button>
</div>
<showMapDialog :title="showTitle" v-if="isShowDialog" v-model="isShowDialog" :locationInfo="locationInfo" :onlyShowLocation="true"></showMapDialog>
</div>
</template>
<script>
export default {
props: {},
filters: {},
data() {
return {
showTitle:"地图显示",
isShowDialog:false,
locationInfo:{
iocn:"",
name:"",
longitude:"", // 经度
latitude:"" // 纬度
}
};
},
methods: {
showMpDialog(row){
this.isShowDialog=true;
this.locationInfo ={
iocn:row.snapshoot,
name:row.name,
longitude: row.longitude, // 经度
latitude:row.latitude, // 纬度
address:row.address
}
},
}
};
</script>