<!-- <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">所在地區(qū)</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">小區(qū)/大廈</div>
? ? ? ? ? ? <div class="rightViewImg">
? ? ? ? ? ? ? <input type="text" v-model="form.mansion" placeholder="例：嶺兜小區(qū)菩颖、華星大廈等" />
? ? ? ? ? ? </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">所在地區(qū)</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">小區(qū)/大廈</div>
? ? ? ? ? <div class="rightViewImg">
? ? ? ? ? ? <input type="text" v-model="form.mansion" placeholder="例：嶺兜小區(qū)、華星大廈等" />
? ? ? ? ? </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", //類別切換控件哗戈，實現(xiàn)默認圖層與衛(wèi)星圖郊艘、實施交通圖層之間切換的控制
? ? "AMap.PolyEditor", //編輯 折線多，邊形
? ? "AMap.CircleEditor", //圓形編輯器插件
? ? "AMap.Geolocation" //定位控件唯咬，用來獲取和展示用戶主機所在的經(jīng)緯度位置
? ],
? 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,
}}
