【前端 VUE】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">&#xe608;</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;

              }

            }

          });

        }

      },

}