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

模块文件VUE

<template>

  <div v-if="showDialog" class="dialog" @touchmoveprevent>

    <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() {

      thisshowDialogActive = false;

      this$emit('update:open', false);

      setTimeout(() => (thisshowDialog = false), 320);

    },

    openFn(){

      thisshowDialog = true;

      setTimeout(() => (thisshowDialogActive = true));

    }

  },

  watch: {

    open:function(data){

      if(data) thisopenFn();

      if(!data) thisclose();

    },

    show: function(data) {

      thisopenFn();

    },

    dismiss: function() {

      thisclose();

    },

  },

  mounted(){

  }

};

</script>

<style lang="scss">

@import "/filters/css/allcss";

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, 04);

    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(123);

    opacity: 0;

    transition: all 032s;

    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

      :opensync="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="formselectedOptions"

              @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;">{{formaddress}}</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";

VueAMapinitAMapApiLoader({

  key: "e1dedc6bdd765d46693986ff7ff969f4",

  plugin: [

    "AMapAutocomplete", //输入提示插件

    "AMapPlaceSearch", //POI搜索插件

    "AMapScale", //右下角缩略图插件 比例尺

    "AMapOverView", //地图鹰眼插件

    "AMapToolBar", //地图工具条

    "AMapMapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制

    "AMapPolyEditor", //编辑 折线多，边形

    "AMapCircleEditor", //圆形编辑器插件

    "AMapGeolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置

  ],

  uiVersion: "10"

});

let amapManager = new VueAMapAMapManager();

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 (!selfinitShow) {

                selfinitShow = true;

                // o 是高德地图定位插件实例

                ogetCurrentPosition((status, result) => {

                  if (result && resultposition) {

                    consolelog(result);

                    selfformlongitude = resultpositionlng;

                    selfformlatitude = resultpositionlat;

                    selfcenter = [selfformlongitude, selfformlatitude];

                    selfformaddress = resultformattedAddress;

                  }

                });

              }

            }

          }

        }

      ],

      events: {

        init: o => {

          ogetCity(result => {});

        },

        moveend: () => {},

        zoomchange: () => {},

        dragend: e => {

          var lgt = this$refsmap$$getCenter();

          selfformlatitude = lgt[1];

          selfformlongitude = lgt[0];

          selfasdasdashowswxcasd = false;

          selfcenter = [selfformlongitude, selfformlatitude];

          // 这里通过高德 SDK 完成。

          var geocoder = new AMapGeocoder({

            radius: 1000,

            extensions: "all"

          });

          geocodergetAddress(this$refsmap$$getCenter(), function(

            status,

            result

          ) {

            if (status === "complete" && resultinfo === "OK") {

              if (result && resultregeocode) {

                selfcenter = [selfformlongitude, selfformlatitude];

                selfformaddress = resultregeocodeformattedAddress;

              }

            }

          });

        }

      },

}

首先打开谷歌地球进入谷歌地球这里看见的画面就是谷歌地球的软件首页：

点击上面工具栏选择第二个（和针似得）（有时间的话其实自己喜欢的话也可以研究一下谷歌地球的功能，联网的谷歌地球和GPS连接可以定位自己所在位置的）：

点击打点工具出现如下图（这里可以添加位置的经纬度，根据手机定位或者是其他定位设备获取自己位置的经纬度，然后添加到这里即可）：

如果你知道的经纬度换算不一样那么我们设置一下工具——选项（经纬度换算有的是根据时，分，秒计算的，但是有的软件是根据小数点的数字计算的，这里就要根据定位的时候显示的数据在软件里面设置显示方法）：

设置经纬度的使用（设置好经纬度的使用方式才能正确的添加手机定位或者其他设备定位的准确位置）：

然后我们用手机或者其他可以知道经纬度的工具确定自己的经纬度（现在几乎所有的手机都有GPS功能，那么在下载一个软件获取经纬度即可）：

输入自己的经纬度，命名为“我的位置”（当然命名大家就随便取名就可以了）：

点击确定然后在左侧的图层就会自动添加“我的位置”的选项，然后点击出现我的位置选项谷歌地球就会自动放大到我的位置：

然后放大根据我们自己所在的省份，再次进行放大找到我的位置（如果谷歌地球软件不能自动放大，那么就自己手动放大吧，“我的位置”在谷歌地球中会显示一个红点，找到那个红点就找到自己的位置了）

饼图的话，每一部分都是扇形。

if(点到圆心的距离<圆的半径&&点到圆心的直线的角度>扇形的起始角度&&点到圆心的直线的角度<扇形的结束角度){

点在扇形区域内

}

或者自己百度一下，如何判断点在扇形区域内。

- (void)locationManager:(CLLocationManager )manager

didUpdateToLocation:(CLLocation )newLocation

fromLocation:(CLLocation )oldLocation

{

if (!gaocoder) {

gaocoder = [[MKReverseGeocoder alloc]initWithCoordinate:newLocationcoordinate];

gaocoderdelegate =self;

[gaocoder start];

}

showmapviewregion=MKCoordinateRegionMake(selfbestloactioncoordinate, MKCoordinateSpanMake(0005f, 0005f));

showmapviewshowsUserLocation=YES;

showmapviewzoomEnabled=NO;

if (!selfbestloaction)selfbestloaction=newLocation;

else if (newLocationhorizontalAccuracy<bestloactionhorizontalAccuracy)

selfbestloaction=newLocation;

latitudeString= [[NSString alloc] initWithFormat:@"%g",newLocationcoordinatelatitude];

NSLog(@"string one:%@",latitudeString);

[latitudeString release];

longitudeString = [[NSString alloc]initWithFormat:@"%g",newLocationcoordinatelongitude];

NSLog(@"string two:%@",longitudeString);

[longitudeString release];

}

以上就是关于VUE 模块化d框 获取地图中心位置坐标地址全部的内容，包括:VUE 模块化d框 获取地图中心位置坐标地址、怎样根据中心坐标计算出当前地图可视区域四个角的坐标、canvas饼图 怎样获取各区域坐标范围等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！