VUE 模块化弹框 获取地图中心位置坐标地址
模块文件VUE
<template>
<div v-if="showDialog" class="dialog" @touchmove.prevent>
<div v-if="showDialog" class="back-drop"></div>
<div class="alert" :class="{'alert-active':showDialogActive,'alert-big':big,'alert-middle':middle}" :style="'width:'+width+'px'">
<div class="title">
{{title}}
<div class="iconfont close" @click="close"></div>
</div>
<div class="dialog-content">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
import { setTimeout } from "timers";
export default {
name: "v-templateCreat",
props: {
title: {
type: String,
default: "温馨提示"
},
cancelText: {
type: String,
default: "取消"
},
doneText: {
type: String,
default: "确定"
},
middle:{
type:Boolean,
default:false
},
big:{
type:Boolean,
default:false
},
show: {
type: Boolean,
default: false
},
dismiss: {
type: Boolean,
default: false
},
width: {
default: 498
},
open:Boolean
},
data() {
return {
showDialog: false,
message: "",
cancel: false,
value: "",
templateCreat: false,
showDialogActive: false
};
},
methods: {
close() {
this.showDialogActive = false;
this.$emit('update:open', false);
setTimeout(() => (this.showDialog = false), 320);
},
openFn(){
this.showDialog = true;
setTimeout(() => (this.showDialogActive = true));
}
},
watch: {
open:function(data){
if(data) this.openFn();
if(!data) this.close();
},
show: function(data) {
this.openFn();
},
dismiss: function() {
this.close();
},
},
mounted(){
}
};
</script>
<style lang="scss">
@import "../filters/css/all.css";
.dialog {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
z-index: 106;
.iconfont {
float: right;
cursor: pointer;
color: #9b9b9b;
}
.back-drop {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 106;
}
.alert {
width: 498px;
min-height: 260px;
// overflow-y: scroll;
background: #fff;
left: calc(50% - 249px);
top: calc(50% - 280px);
position: fixed;
z-index: -1;
transform: scale(1.23);
opacity: 0;
transition: all 0.32s;
position: relative;
.title {
height: 44px;
width: 100%;
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 44px;
background: #f2f2f2;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 16px;
}
.message {
padding: 18px;
min-height: 100px;
overflow: auto;
}
}
.alert-middle{
width:614px !important;
left:calc(50% - 307px);
}
.alert-big{
width:748px !important;
left:calc(50% - 374px);
}
.alert-active {
z-index: 9999;
transform: scale(1);
opacity: 1;
}
}
</style>
////////////////////////////////
使用
import templateCreat from "@/components/templateCreat";
components: {
templateCreat
},
<!-- 店铺地址 -->
<templateCreat
:open.sync="creatShowTemplate"
title="店铺地址"
:width="450"
>
<div class="exampleCenten">
<div class="flex">
<div class="leftTxt">所在地区</div>
<div class="rightViewImg">
<el-cascader
style="width:310px;height:40px;"
size="large"
:options="regionOptions"
v-model="form.selectedOptions"
@change="addressChange"
></el-cascader>
</div>
</div>
<div class="flex">
<div class="leftTxt"></div>
<div class="rightViewImg">
<div class="amapsView">
<div style="padding:0 0 10px;">确认坐标，方便到店消费</div>
<div class="amaps" :style="events?'width:300px;height:240px;':''">
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:center="center"
:zoom="zoom"
:plugin="plugin"
:events="events"
class="amap-demo"
></el-amap>
<div class="amapsSon"></div>
</div>
<div style="padding:10px 0;width:300px;">{{form.address}}</div>
</div>
</div>
</div>
</div>
<div class="flex msgboxBtns">
<el-button type="primary" style="width:100px;border-radius:0;" @click="shopSiteClick">保存</el-button>
</div>
</templateCreat>
import VueAMap from "vue-amap";
VueAMap.initAMapApiLoader({
key: "e1dedc6bdd765d46693986ff7ff969f4",
plugin: [
"AMap.Autocomplete", //输入提示插件
"AMap.PlaceSearch", //POI搜索插件
"AMap.Scale", //右下角缩略图插件 比例尺
"AMap.OverView", //地图鹰眼插件
"AMap.ToolBar", //地图工具条
"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
"AMap.PolyEditor", //编辑 折线多，边形
"AMap.CircleEditor", //圆形编辑器插件
"AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
],
uiVersion: "1.0"
});
let amapManager = new VueAMap.AMapManager();
data() {
let self = this;
return {
amapManager, //地图
regionOptions: regionData,
zoom: 12,
center: [],
getCertificationData: "",
uploadActions: "",
uploadType: "",
initShow: false,
form：{
address：‘’} //地址
plugin: [
{
pName: "Geolocation",
events: {
init(o) {
if (!self.initShow) {
self.initShow = true;
// o 是高德地图定位插件实例
o.getCurrentPosition((status, result) => {
if (result && result.position) {
console.log(result);
self.form.longitude = result.position.lng;
self.form.latitude = result.position.lat;
self.center = [self.form.longitude, self.form.latitude];
self.form.address = result.formattedAddress;
}
});
}
}
}
}
],
events: {
init: o => {
o.getCity(result => {});
},
moveend: () => {},
zoomchange: () => {},
dragend: e => {
var lgt = this.$refs.map.$$getCenter();
self.form.latitude = lgt[1];
self.form.longitude = lgt[0];
self.asdasdashowswxcasd = false;
self.center = [self.form.longitude, self.form.latitude];
// 这里通过高德 SDK 完成。
var geocoder = new AMap.Geocoder({
radius: 1000,
extensions: "all"
});
geocoder.getAddress(this.$refs.map.$$getCenter(), function(
status,
result
) {
if (status === "complete" && result.info === "OK") {
if (result && result.regeocode) {
self.center = [self.form.longitude, self.form.latitude];
self.form.address = result.regeocode.formattedAddress;
}
}
});
}
},
}
