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 模块化弹框 获取地图中心位置坐标地址的主要内容,如果未能解决你的问题,请参考以下文章

如何获取谷歌地图的屏幕中心位置?

怎样把GPS得到的经纬度转换为具体位置

怎样把GPS得到的经纬度转换为具体位置

百度地图拖动标注后获取坐标

uniapp地图拾取中心点坐标经纬度并进行反编码

百度地图 怎样实现点击获取建筑的名字