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

地图插件文档：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({// 高德的keykey: '****************',// 插件集合plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','Geocoder'],// 高德 sdk 版本，默认为 1.4.4v: '1.4.4'
});

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

<template><div class="amap-page-container"><el-amap-search-boxclass="search-box":search-option="searchOption":on-search-result="onSearchResult"></el-amap-search-box><div class="map-content"><el-amapref="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, //是否使用高精度定位，默认:truetimeout: 100, //超过10秒后停止定位，默认：无穷大maximumAge: 0, //定位结果缓存0毫秒，默认：0convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true, //显示定位按钮，默认：truebuttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：fextensions: "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><!-- v-if="" 此处如果是弹窗显示的话，需要加一个判断打开或关闭的判读，进行对地图的重新渲染 --><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>

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

微信小程序+腾讯地图获取定位与地图选点插件
文章目录一.思路二.逆地址解析 2.1. app.json 2.2. 页面加入 2.3. 后台代码三.地图插件调用 3.1. app.json加入 3.2. js页面加入 3.3. wxml页面 ...
[微信小程序]小程序引入腾讯地图选点插件出现：未取得授权
问题:小程序引入腾讯地图选点插件出现:未取得授权在微信小程序引入腾讯地图选点插件:官方文档 1.微信小程序接入腾讯地图服务,申请Key 2.在 app.json 中添加 "plugins& ...
vue 高德地图定位插件地图实例插件获取点击的地方的经纬度和具体地址
npm 安装推荐 npm 安装. npm install vue-amap --saveimport VueAMap from 'vue-amap';Vue.use(VueAMap); VueAMa ...
微信小程序插件引入，地铁图插件、地图选点插件、地图选点插件
如果用微信小程序插件需要开发者秘钥:申请秘钥第一步:记住下面内容一定要写在app.json这个文件里 "plugins": {"subway": {" ...
哔哩哔哩Allen前端vue后台管理系统笔记
哔哩哔哩Allen前端vue后台管理系统笔记 Element ui 引入全局引入按需引入嵌套路由左侧菜单栏的样式 Container布局,左侧菜单栏commonAside组件 commonAs ...
正确姿势开发vue后台管理系统
项目地址 vue-admin-webapp 欢迎star,fork 前言相信许多人和我一样刚接触 vue 时看文档都很枯燥,看完 vue,还有 vueRouter .vuex .vue-cli.es ...
vue后台管理系统搭建
vue后台管理系统搭建前提安装node.js 控制台安装yarn:npm install -g yarn 查看yarn版本:yarn --version 注:-g表示的是全局安装淘宝镜像安装:n ...
uniapp微信小程序使用地图选点插件
uniapp使用腾讯位置服务地图选点文章目录 uniapp使用腾讯位置服务地图选点效果图 1. 在公众平台申请插件 2. 引入插件 3. 设置定位授权: 4. 使用插件效果图 1. 在公众平台申 ...
uniapp之地图选点插件
使用此插件前提: 已经有key值,申请方法请详见微信小程序获取地理位置信息_夏-小-舟的博客-CSDN博客首先, 先找到地图选点插件 2.插件申请接入(直接点击"点击浏览插件最新版本&qu ...
VUE后台管理系统权限管理
VUE后台管理系统权限管理(面试路由守卫) 1.背景后台管理系统中总会遇到权限分配的问题:这也是一道vue的很经典的面试问题 2.解决思路权限管理无非前端或者后台解决先说一下前端解决的思路:在设 ...

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

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

最新文章

热门文章