vue 后台管理系统引入地图选点插件获取经纬度

小灰灰 2022-11-20 00:59 274阅读 0赞

地图插件文档：[https://elemefe.github.io/vue-amap/\#/][https_elemefe.github.io_vue-amap]

下载引入插件

npm install --save vue-amap

在main全局引用插件

// 引入vue-amap
    import VueAMap from 'vue-amap';
    // 初始化vue-amap
    Vue.use(VueAMap);
    VueAMap.initAMapApiLoader({
      // 高德的key
      key: '****************',
      // 插件集合
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch',
       'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 
       'AMap.CircleEditor','Geocoder'],
      // 高德 sdk 版本，默认为 1.4.4
      v: '1.4.4'
    });

写一个地图组件  views/components/gd-map.vue  方便项目中多处使用

<template>
      <div class="amap-page-container">
        <el-amap-search-box
          class="search-box"
          :search-option="searchOption"
          :on-search-result="onSearchResult"
        ></el-amap-search-box>
        <div class="map-content">
          <el-amap
            ref="map"
            vid="amapDemo"
            :amap-manager="amapManager"
            :events="events"
            :center="center"
            expandZoomRange="true"
            :zoom="zoom"
            :plugin="plugins"
            :pitch="66"
          >
            <el-amap-marker :position="center" :icon="icon" :title="address">
            </el-amap-marker>
          </el-amap>
        </div>
        <div class="toolbar">
          position: [{
       { lng }}, {
       { lat }}] address: {
       { address }}
        </div>
      </div>
    </template>
    
    <script>
    import { AMapManager } from "vue-amap";
    let amapManager = new AMapManager();
    export default {
      props: {
        locationInfo: {
          type: Object,
          default: null,
        },
        changeCall: {
          type: Function,
          default: null,
        },
      },
      data() {
        let self = this;
        return {
          amapManager,
          zoom: 12,
          center: [117.121024, 36.654143],
          address: "",
          searchOption: {
            city: "",
            citylimit: true,
          },
          markers: [
            // [121.59996, 31.197646],
            // [121.40018, 31.197622],
            // [121.69991, 31.207649]
          ],
          events: {
            click(e) {
              let { lng, lat } = e.lnglat;
              self.lng = lng;
              self.lat = lat;
    
              // 这里通过高德 SDK 完成。
              var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all",
              });
              geocoder.getAddress([lng, lat], function (status, result) {
                if (status === "complete" && result.info === "OK") {
                  if (result && result.regeocode) {
                    self.center = [self.lng, self.lat];
                    self.address = result.regeocode.formattedAddress;
                    self.$nextTick();
                    self.locationChange();
                  }
                }
              });
            },
          },
          lng: 0,
          lat: 0,
          plugins: [
            {
              enableHighAccuracy: true, //是否使用高精度定位，默认:true
              timeout: 100, //超过10秒后停止定位，默认：无穷大
              maximumAge: 0, //定位结果缓存0毫秒，默认：0
              convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
              showButton: true, //显示定位按钮，默认：true
              buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
              showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
              showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
              panToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：true
              zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
              extensions: "all",
              //地图定位按钮
              pName: "Geolocation",
              init(o) {
                // o 是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  console.log(result);
                  debugger;
                  if (result && result.position) {
                    self.lng = result.position.lng;
                    self.lat = result.position.lat;
                    self.center = [self.lng, self.lat];
                    self.loaded = true;
                    self.$nextTick();
                  }
                });
              },
            },
          ],
          icon: null,
        };
      },
      created() {
        if (this.locationInfo) {
          this.iocn = this.locationInfo.iocn;
          this.name = this.locationInfo.name;
          this.address = this.locationInfo.address;
          this.lng = this.locationInfo.longitude;
          this.lat = this.locationInfo.latitude;
          this.center = [this.lng, this.lat];
        } else {
          var Geolocation = new AMap.Geolocation({
            radius: 1000,
            extensions: "all",
          });
        }
      },
      methods: {
        locationChange() {
          if (this.changeCall) {
            this.changeCall(this.address, this.lng, this.lat);
          }
        },
        onSearchResult(pois) {
          let latSum = 0;
          let lngSum = 0;
          if (pois.length > 0) {
            pois.forEach((poi) => {
              let { lng, lat } = poi;
              lngSum += lng;
              latSum += lat;
              this.markers.push([poi.lng, poi.lat]);
            });
            let center = {
              lng: lngSum / pois.length,
              lat: latSum / pois.length,
            };
            this.center = [center.lng, center.lat];
          }
        },
      },
    };
    </script>
    
    <style>
    .amap-page-container {
      width: 100%;
      height: 500px;
    }
    .search-box {
      position: absolute;
      top: 65px;
      left: 20px;
    }
    .map-content {
      height: 90%;
    }
    </style>

在使用页面引入组件

import gdMap from '@/views/components/gd-map'
    
    export default {
      // 注册组件
      components: {gdMap}
    
    }

页面调用进行选点获取经纬度信息

<div>
           
          <gdMap :changeCall="changeAddressCall" :locationInfo="locationInfo"></gdMap>
    </div>
    
    <script>
    import gdMap from '@/views/components/gd-map'
      export default {
      // 注册组件
      components: {gdMap},
     data() {
          return {
            form:{},
            // 默认初始化显示的坐标
            locationInfo:{
                iocn:"",
                name:"",
                longitude:"", // 经度
                latitude:"", // 纬度
                address:"" // 地址
            }
        }
     },
      methods: {
          // 获取经纬度，地址信息回调方法
          changeAddressCall(address,lng,lat){
            this.form.address=address;
            this.form.longitude=lng;
            this.form.latitude=lat;
          },
      }
    }
    
    </script>

table中根据经纬度弹出Dialog   地位位置信息

dialog地图信息组件 showMapDialog

<template>
      <el-dialog
        :title="title"
        :visible.sync="isShow"
        :width="width"
        :before-close="handleClose"
        @closed="closed"
      >
        <gdMap :locationInfo="showLocationInfo"></gdMap>
      </el-dialog>
    </template>
    
    <script>
    import gdMap from "@/views/components/gd-map";
    export default {
      components: {
        gdMap,
      },
      data() {
        return {
          isShow: this.value,
          showLocationInfo: this.locationInfo,
        };
      },
      props: {
        locationInfo: {
          type: Object,
          default: null,
        },
        title: {
          type: String,
          default: null,
        },
    
        transactionGroupType: {
          type: String,
          default: null,
        },
        value: {
          type: Boolean,
          default: false,
        },
        width: {
          type: String,
          default: "60%",
        },
      }, // 图片数组数据
      created() {
        this.locationInfo;
        debugger;
      },
      mounted() {},
      methods: {
        opened() {},
        closed() {
          this.$emit("input", false);
        },
        handleClose() {
          this.isShow = false;
        },
      },
    };
    </script>
    
    <style>
    </style>

页面中根据经纬度显示地图使用

在main中进行全局注册

import showMapDialog from '@/views/components/showMapDialog'
    Vue.component('showMapDialog', showMapDialog)

页面使用

<template>
      <div class="app-container">
    
        <div>
            <el-button size="mini" type="info"  class="el-icon-map-location"  @click="showMpDialog(row)">显示地图</el-button>
        </div>
    
        <showMapDialog :title="showTitle" v-if="isShowDialog" v-model="isShowDialog" :locationInfo="locationInfo" :onlyShowLocation="true"></showMapDialog>
    
      </div>
    </template>
    
    <script>
    
    export default {
      props: {},
      filters: {},
      data() {
        return {
          showTitle:"地图显示",
          isShowDialog:false,
          locationInfo:{
            iocn:"",
            name:"",
            longitude:"", // 经度
            latitude:"" // 纬度
          }
        };
      },
    
      methods: {
        showMpDialog(row){
            this.isShowDialog=true;
            this.locationInfo ={
              iocn:row.snapshoot,
              name:row.name,
              longitude: row.longitude, // 经度
              latitude:row.latitude, // 纬度
              address:row.address
           }
        },
    
      }
    };
    </script>

[https_elemefe.github.io_vue-amap]: https://elemefe.github.io/vue-amap/#/