vue

2024-01-04 00:04| 来源: 网络整理| 查看: 265

1.注册成为开发者 -》申请秘钥key 调用高德api

高德地图开放平台：https://lbs.amap.com/?ref=https://console.amap.com/dev/index

此处有详细步骤：(注：有些功能-》申请的 key 必须配备安全密钥 jscode 一起使用)

此处有详细步骤：Vue（vue-amap）接入高德地图获取坐标与地址信息_Your-Nikee的博客-CSDN博客_vue-amap 根据地点查询坐标

2.安装vue-amap 依赖 npm install vue-amap --save 3. 在项目 main.js 中引入（根据所需功能引入） import VueAMap from 'vue-amap'; //引入高德 VueAMap.initAMapApiLoader({ key: '写入申请的key', //插件集合 plugin: [ 'AMap.Geolocation', //定位空间，用来获取和展示用户主机所在的经纬度位置 ' AMap.Autocomplete ', //输入提示插件 ' AMap.PlaceSearch ', //POI搜索插件 ' AMap.Scale ', //右下角缩略图插件，比例尺 ' AMap.OverView ', //地图鹰眼插件 ' AMap.ToolBar ', //地图工具条 ' AMap.MapType ', //类别切换空间，实现默认图层与卫星图，实施交通层之间切换的控制 ' AMap.PolyEditor ', //编辑折线多边形 ' AMap.CircleEditor ', "AMap.Geocoder" //地图编码 ] }); 4.在需要地图的组件中调用 1. map子页面

html：

一些属性：

js：地理编码与逆地理编码-服务-教程-地图 JS API v2.0 | 高德地图API

import VueAMap from "vue-amap"; const amapManager = new VueAMap.AMapManager(); //获取实例中的画布 // let Geocoder; export default { name: "amaps", props: ["Nowlnglat"], //接受父页面的经纬度 data() { let self = this; //定义当前对象(data) 为 self return { amapManager, //搜索条件 searchOption: { city: "全国", //范围 citylimit: false, //是否限制城市内搜索 }, marker: { // position: [118.054927, 36.813487], //坐标 position: [0, 0], //坐标 events: { click: (e) => { console.log("点击maker", e); this.marker = null; }, //点标记拖拽移动结束触发事件 dragend: (e) => { console.log("---event---: dragend", e); this.marker.position = [e.lnglat.lng, e.lnglat.lat]; }, }, visible: true, //点标记是否可见，默认为true。 draggable: false, //设置点标记是否可拖拽移动，默认为false。 template: "1", }, lng: 0, //经度 lat: 0, //纬度 clicklnglat:[], center: [0, 0], //el-amap绑定一个事件（点击）获取当前位置的经纬度 events: { init: (o) => { o.getCity((result) => { // console.log(result); }); }, //点击获取当前位置的经纬度 click: (e) => { // if (!!this.marker) { //获取点击后的经纬度 self.lng = e.lnglat.lng; self.lat = e.lnglat.lat; self.center = [e.lnglat.lng, e.lnglat.lat]; //设置范围中心点 self.marker.position = [self.lng, self.lat]; //存储点击后经纬度 sessionStorage.setItem("maplng", self.lng); sessionStorage.setItem("maplat", self.lat); console.log("点击后", sessionStorage.getItem("maplng")); console.log("点击后",sessionStorage.getItem("maplat")); // } // else { // this.marker = { // position: [e.lnglat.lng, e.lnglat.lat], // events: { // click: (e) => { // console.log("点击maker", e); // this.marker = null; // }, // dragend: (e) => { // console.log("---event---: dragend", e); // this.marker.position = [e.lnglat.lng, e.lnglat.lat]; // }, // }, // visible: true, // draggable: false, // template: "1", // }; // } //Geocoder编码：根据地理名称来获得地点的经纬度 let geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all", }); //根据坐标获取位置将经纬度转换后成地址信息放在输入框展示 geocoder.getAddress( [e.lnglat.lng, e.lnglat.lat], function (status, result) { if (status === "complete" && result.info === "OK") { document.querySelector(".search-box-wrapper input").value = result.regeocode.formattedAddress; } } ); }, }, // el-amap定位当前位置（初始化） plugin: [ { enableHighAccuracy: true, //是否使用高精度定位，默认:true timeout: 100, //超过10秒后停止定位，默认：无穷大 maximumAge: 0, //定位结果缓存0毫秒，默认：0 convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true showButton: true, //显示定位按钮，默认：true buttonPosition: "RB", //定位按钮停靠位置，默认：'LB'，左下角 showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f extensions: "all", pName: "Geolocation", events: { init(o) { // o是高德地图定位插件实例 // console.log("0", o); o.getCurrentPosition((status, result) => { // console.log("初始化当前位置", result); if (result && result.position) { // 设置经度 self.lng = result.position.lng; // 设置纬度 self.lat = result.position.lat; //如果 Nowlnglat 经纬度有值回显或刷新页面：显示初始化的定位或点击后的定位 if(self.Nowlnglat[0] != null && self.Nowlnglat[1] != null){ console.log('Nowlnglat____',self.Nowlnglat) let Clnglat =self.Nowlnglat self.center = Clnglat; self.marker.position = Clnglat; let geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all", }); //根据坐标获取位置将经纬度转换后成地址信息放在输入框展示 geocoder.getAddress( Clnglat, function (status, result) { if (status === "complete" && result.info === "OK") { document.querySelector(".search-box-wrapper input").value = result.regeocode.formattedAddress; } } ); // alert(123) } else { // 设置坐标中心点 self.center = [self.lng, self.lat]; self.marker.position = [self.lng, self.lat]; //存储初始化定位 sessionStorage.setItem("maplng1", self.lng); sessionStorage.setItem("maplat1", self.lat); console.log("初始", sessionStorage.getItem("maplng1")); console.log(sessionStorage.getItem("maplat1")); document.querySelector(".search-box-wrapper input").value = result.formattedAddress; } self.loaded = true; self.$nextTick(); //页面渲染好后 } }); }, }, }, ], }; }, methods: { //搜索地址查询结果 onSearchResult(pois) { console.log(pois); this.marker.position = [pois[0].lng, pois[0].lat]; this.center = [pois[0].lng, pois[0].lat]; sessionStorage.setItem("maplng", pois[0].lng); sessionStorage.setItem("maplat", pois[0].lat); }, }, };

css：

.map_address { height: 50vh; width: 100vh; // background: red; .amap-wrapper { // display: flex; // flex-direction: column; height: 100%; width: 100%; .search-box { width: 100%; // transform: translateY(-20px); border: 1px solid #d9d9d9; /deep/.search-btn { background: #46a6ff; width: 15%; border-radius: 5px; } } } } 2. 父页面（表单页）

html：引入子组件map

js：Nowlnglat（经纬度）传给子组件回显

import addressMap from '@/views/register/components/map.vue' //引入组件 export default { name: "module2", data() { return { Nowlnglat:[], }; }, components:{addressMap}, mounted() { //判断获取到的经纬度初始化或点击后传给子组件map 回显 if(sessionStorage.getItem('maplng')&&sessionStorage.getItem('maplat')){ this.formData.longitude= sessionStorage.getItem('maplng') this.formData.latitude= sessionStorage.getItem('maplat') this.Nowlnglat=[this.formData.longitude,this.formData.latitude] // console.log('点击后--',this.Nowlnglat) }else{ this.formData.longitude= sessionStorage.getItem('maplng1') this.formData.latitude= sessionStorage.getItem('maplat1') this.Nowlnglat=[this.formData.longitude,this.formData.latitude] // console.log('初始化--',this.Nowlnglat) } }, methods: { } };

【本文地址】

vue

vue

今日新闻

推荐新闻