vue-amap 实现高德地图定位 + 搜索 +回显
html：<template><div class="amap-page-container"><!-- 搜索条件 是个对象searchOption 属性是city城市名，citylimit：false； 搜索回调函数 --><el-amap-search-boxclass="search-box":search-option="searchOption"
·
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 --save3. 在项目 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：
一些属性：
<!--
amap-manager： 地图管理对象
vid：地图容器节点的ID
zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默
认范围[3-19]，取值范围[3-19]
center： 地图中心点坐标值
plugin：地图使用的插件
events： 事件
-->
<template>
<div class="amap-page-container">
<!-- 搜索条件 是个对象searchOption 属性是city城市名，citylimit：false； 搜索回调函数 -->
<el-amap-search-box
class="search-box"
:search-option="searchOption"
:on-search-result="onSearchResult"
></el-amap-search-box>
<el-amap
ref="map"
vid="amapDemo"
:amap-manager="amapManager"
:center="center"
:zoom="12"
:plugin="plugin"
:events="events"
class="amap-demo"
>
<!-- 点标记在地图上显示的位置，默认为地图中心点， -->
<el-amap-marker
:position="marker.position"
:events="marker.events"
:visible="marker.visible"
:draggable="marker.draggable"
></el-amap-marker>
</el-amap>
</div>
</template><script>
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: "<span>1</span>",
},
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: "<span>1</span>",
// };
// }
//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);
},
},
};
</script>css：
<style scoped lang="scss">
.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;
}
}
}
}
</style>2. 父页面 （表单页）
html： 引入子组件map
<el-form-item label="地理位置:" >
<address-map :Nowlnglat="Nowlnglat" ></address-map>
</el-form-item>js：Nowlnglat（经纬度）传给子组件 回显
<script>
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: {
}
};
</script>
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)