<!-- <div class="MessageBox" v-if="form.exampleShow">
<div class="msgbox">
<div class="flexBet msgboxHeader">
<div>店铺地址</div>
<div @click="form.exampleShow=false" class="iconfont cursor"></div>
</div>
<div class="exampleCenten">
<div class="flex">
<div class="leftTxt">所在地区</div>
<div class="rightViewImg">
<el-cascader
style="width:3.5rem;height:0.46rem;"
size="large"
:options="regionOptions"
v-model="form.selectedOptions"
@change="addressChange"
></el-cascader>
</div>
</div>
<div class="flex">
<div class="leftTxt">街道/道路</div>
<div class="rightViewImg">
<input type="text" v-model="form.street" placeholder="例：岭兜西路269等" />
</div>
</div>
<div class="flex">
<div class="leftTxt">小区/大厦</div>
<div class="rightViewImg">
<input type="text" v-model="form.mansion" placeholder="例：岭兜小区、华星大厦等" />
</div>
</div>
<div class="flex">
<div class="leftTxt">门牌号</div>
<div class="rightViewImg">
<input type="text" v-model="form.doorplate" placeholder="例：16号楼5层508室等" />
</div>
</div>
<div class="flex">
<div class="leftTxt"></div>
<div class="rightViewImg">
<div class="amapsView">
<div style="padding:0 0 .1rem;">确认坐标，方便到店消费</div>
<div class="amaps" :style="events?'width:3.7rem;height:2.8rem;':''">
<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:0.1rem 0;width:3.7rem;">{{form.address}}</div>
</div>
</div>
</div>
</div>
<div class="flex msgboxBtns">
<div class="btnBackground3c" @click="exampleShow=false">取消</div>
<div class="btnBackground cursor" @click="shopSiteClick">保存</div>
</div>
</div>
</div>-->
<templateCreat :show="creatShowTemplate" :dismiss="creatDismissTemplate" 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">
<input type="text" v-model="form.street" placeholder="例：岭兜西路269等" />
</div>
</div>
<div class="flex">
<div class="leftTxt">小区/大厦</div>
<div class="rightViewImg">
<input type="text" v-model="form.mansion" placeholder="例：岭兜小区、华星大厦等" />
</div>
</div>
<div class="flex">
<div class="leftTxt">门牌号</div>
<div class="rightViewImg">
<input type="text" v-model="form.doorplate" placeholder="例：16号楼5层508室等" />
</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">
<div class="btnBackground cursor" @click="shopSiteClick">保存</div>
</div>
</templateCreat>
css
.exampleCenten {
padding: 20px;
padding-bottom: 0;
.flex {
align-items: center;
margin: 0 0rem 0.2rem;
.leftTxt {
width: 80px;
}
input {
width: 310px;
box-sizing: border-box;
height: 40px;
border-radius: 5px;
padding: 0 0.2rem;
border: 1px solid #d6d6d6;
}
input:focus {
outline: 0;
}
}
.listItemSon {
display: flex;
padding: 0.2rem;
border-bottom: 1px solid #d6d6d6;
img {
height: 0.8rem;
margin-right: 0.1rem;
width: 0.8rem;
}
}
.listItemSonChex {
border: 1px solid #027aff;
}
}
.msgboxBtns {
justify-content: flex-end;
padding: 0 0.2rem;
box-sizing: border-box;
width: 430px;
padding-bottom: 0.2rem;
div {
width: 122px;
height:38px;
line-height: 38px;
text-align: center;
margin-left: 0.2rem;
border-radius: 2px;
}
}
js 地图
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: [121.59996, 31.197646],
getCertificationData: "",
uploadActions: "",
uploadType: "",
plugin: [
{
pName: "Geolocation",
events: {
init(o) {
// 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 => {
console.log(e);
var lgt = this.$refs.map.$$getCenter();
console.log(lgt);
self.form.latitude = lgt[1];
self.form.longitude = lgt[0];
// 这里通过高德 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.form.address = result.regeocode.formattedAddress;
}
}
});
}
},
longitude: 0,
latitude: 0,
}}
