VUE 模块化弹框 获取地图中心位置坐标地址

模块文件VUE

////////////////////////////////

使用

import templateCreat from "@/components/templateCreat";

components: {

    templateCreat

  },

   

      :open.sync="creatShowTemplate"

      title="店铺地址"

      :width="450"

    >

     

       

         

所在地区

         

           

              style="width:310px;height:40px;"

              size="large"

              :options="regionOptions"

              v-model="form.selectedOptions"

              @change="addressChange"

            >

         

       

       

         

         

           

             

确认坐标，方便到店消费

             

               

                  ref="map"

                  vid="amapDemo"

                  :amap-manager="amapManager"

                  :center="center"

                  :zoom="zoom"

                  :plugin="plugin"

                  :events="events"

                  class="amap-demo"

                >

               

             

             

{{form.address}}

           

         

       

     

     

        保存

     

   

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;

              }

            }

          });

        }

      },

}