VUE 模块化弹框 获取地图中心位置坐标地址
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE 模块化弹框 获取地图中心位置坐标地址相关的知识，希望对你有一定的参考价值。
参考技术A 模块文件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;
);
,
以上是关于VUE 模块化弹框 获取地图中心位置坐标地址的主要内容，如果未能解决你的问题，请参考以下文章