封装的map.vue
<template>
<view>
<map id="popMap" ref="maps" :longitude="longitude" :latitude="latitude" scale="14" :markers="markers"
@tap="onMapTap" @click="onMapClick" @regionchange="onRegionChange" show-location
style="width: 750rpx; height: 100vh;"></map>
</view>
</template>
<script>
import amapPlugin from "@amap/amap-jsapi-loader";
export default {
data() {
return {
// 初始化地图的位置
longitude: 118.020013,
latitude: 37.461536,
markers: [ // 设置标记点
{
latitude: 118.020013,
longitude: 37.461536,
title: 'New York City',
iconPath: '/static/mapLocation.png',
},
],
};
},
onReady() {
// 高德地图API初始化
this.initAmap();
this.addMapEvent()
},
mounted() {
// this.addMapEvent()
},
methods: {
initAmap() {
console.log('111');
// 高德地图API初始化代码，需要自行获取key
amapPlugin.initAMapApi('13254965e7ab4c469911c1256a2b129e');
},
onRegionChange(e) {
// 当地图区域发生变化时，更新位置
return
if (e.type === 'end') {
console.log(e);
this.longitude = e.detail.centerLocation.longitude;
this.latitude = e.detail.centerLocation.latitude;
this.markers[0].longitude = this.longitude
this.markers[0].latitude = this.latitude
// 使用高德地图API进行逆地理编码查询地址信息
this.reverseGeocode()
// uni.getLocation({
// longitude: this.longitude,
// latitude: this.latitude,
// success: (res) => {
// console.log(res, '成功');
// this.reverseGeocode()
// // 调用高德API进行逆地理编码
// // amapPlugin.reverseGeocode({
// // location: `${this.longitude},${this.latitude}`,
// // success: (data) => {
// // // 成功获取地址信息
// // console.log(data.address);
// // },
// // fail: () => {
// // // 获取地址失败处理
// // }
// // });
// }
// });
}
},
onMapTap(e) {
console.log('地图被点击了', e)
let that = this;
console.log(this.$refs.maps, 'maps')
// var maps = uni.createMapContext(e.target.id, this);
// console.log(maps, 'maps');
// console.log(maps.pageVm, '0000')
// this.$refs.maps.onclick = function(point) {
// console.log(point, 'point')
// }
},
onMapClick(e) {
console.log(e, 'click点击');
},
reverseGeocode(e) {
const {
longitude,
latitude
} = this.markers[0];
const key = '13254965e7ab4c469911c1256a2b129e'; // 替换为你的高德API密钥
const url = `https://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${longitude},${latitude}`;
uni.request({
url,
success: ({
data
}) => {
if (data.status === '1') {
console.log(data, '反显成功');
// uni.showModal({
// title: '地址信息',
// content: data.regeocode.formatted_address,
// showCancel: false
// });
} else {
uni.showToast({
title: '逆地理编码失败',
icon: 'none'
});
}
},
fail: () => {
uni.showToast({
title: '请求失败',
icon: 'none'
});
}
});
},
addMapEvent() {
console.log('点击时间', uni.createMapContext);
let that = this;
var maps = this.$refs.maps //uni.createMapContext("popMap", this).$getAppMap();
console.log(maps, 'maps');
maps.onclick = function(point) {
console.log(point, "point")
that.longitude = point.longitude
that.latitude = point.latitude
that.covers = [];
that.covers = [{
id: 2, //点击时候是第二次作为标记点定义。id为2，不能重复
latitude: point.latitude,
longitude: point.longitude,
iconPath: img,
fontSize: 80,
title: "所选位置"
}]
}
}
}
// //根据地址获取经纬度
// geoApi = (address) => axios(
// 'http://restapi.amap.com/v3/geocode/geo',
// 'GET', {
// address,
// key
// }
// )
};
</script>
View Code
使用时，直接引入组件，该传参传参，该接收接收
标签：map,console,log,point,longitude,maps,latitude,调起,高德 From： https://www.cnblogs.com/qinyuanchun/p/18211150