前言
使用uniapp 小程序 使用地图，我使用的是uniapp原生的地图，实现根据坐标在地图上显示自定义内容，首次加载获取坐标对角经纬度，通过对角经纬度给后端，进行只显示当前屏幕内的自定义内容，在通过拖拽事件，加载范围内（对标坐标经纬度）显示需要加载的内容，以及中心点，地图层级。
部分代码解释
javascript
scale：地图缩放级别
markers：标记点
callouttap：标记点点击事件
markertap：markers内容的点击事件，就是自定义内容的点击事件
regionchange：推拽事件
regionchange - begin ：拖拽开始事件
regionchange - end：拖拽结束事件
this.mapContext = uni.createMapContext("map", this); // 创建地图上下文
that.mapContext.getCenterLocation： 获取中心点位置
that.mapContext.getRegion ： 获取后获取对角坐标
that.mapContext.getScale ： 获取缩放级别全部代码
javascript
<template>
<view>
<!-- 搜索 -->
<view class="search-box">
<view class="search">
<text class="iconfont icon-sousuo-copy-copy"></text>
<input type="text" confirm-type="search" @confirm="searchInput" v-model="search" placeholder="请输入搜索内容">
</view>
</view>
<map id="map" class="map" style="width: 100%; height: 100vh;" :scale="scale" :latitude="latitude"
:longitude="longitude" :markers="covers" @callouttap='callouttap' @markertap="mapAction"
@regionchange="regionchange">
</map>
</view>
</template>
<script>
export default {
data() {
return {
scale: 11,// 地图缩放级别
id: 0, // 使用 marker点击事件 需要填写id
title: 'map',
// 地图中心点 为空 默认北京
latitude: 34.745982,
longitude: 113.658233,
covers: [],
search: '',//搜索内容
mapContext: '',//地图对象
zuobiao: {},//拖拽坐标
}
},
onLoad() {
this.mapContext = uni.createMapContext("map", this); // 创建地图上下文
this.getInitialFocusCoordinates(); // 获取首次屏幕对焦经纬度
},
mounted() {
// this.mapContext = uni.createMapContext("map", this); // 创建地图上下文
// this.getInitialFocusCoordinates(); // 获取首次屏幕对焦经纬度
},
// 下拉刷新
onPullDownRefresh() {
this.getInitialFocusCoordinates(); // 获取首次屏幕对焦经纬度
uni.showToast({
title: '刷新成功',
icon: 'success',
duration: 1000
})
uni.stopPullDownRefresh(); // 停止刷新
},
methods: {
// markers 内容的点击事件。
callouttap(e) {
console.log("e", JSON.parse(JSON.stringify(e)));
const marker = this.covers.find(item => {
return item.id == e.detail.markerId
});
// 导航跳转
uni.openLocation({
latitude: parseFloat(marker.latitude),
longitude: parseFloat(marker.longitude),
name: marker.callout.content,
address: marker.address,
success: function (res) {
console.log('打开系统位置地图成功')
},
fail: function (error) {
console.log(error)
}
})
},
// 获取首次屏幕对焦经纬度
getInitialFocusCoordinates() {
this.mapContext.getRegion({
success: (res) => {
const northeast = res.northeast; // 东北角
const southwest = res.southwest; // 西南角
const zuobiao = {
northeast: northeast,
southwest: southwest
};
this.zuobiao = [zuobiao.northeast, zuobiao.southwest];
this.QiyeMap();
console.log("this.首次对角", JSON.parse(JSON.stringify(this.zuobiao)));
},
fail: (err) => {
console.error('获取对焦经纬度失败:', err);
}
});
},
// 企业地图数据
async QiyeMap() {
const res = await this.$axios("home/QiyeMap", {
title: this.search,
zuobiao: this.zuobiao,
scale: this.scale,
})
console.log("企业地图数据", JSON.parse(JSON.stringify(res.data)));
if (res.data.code == 0) {
this.covers = res.data.lists.map(item => {
return {
id: item.id,
latitude: item.lat,
longitude: item.lon,
address: item.address,
// iconPath: '/static/images/map.png',
width: 22,
height: 22,
callout: {
content: item.title,
display: 'ALWAYS',
color: '#ffffff',
fontSize: 12,
borderRadius: 4,
bgColor: '#000',
padding: '5',
}
}
});
}
},
// 地图标记点点击事件
mapAction(e) {
const marker = this.covers.find(item => {
return item.id == e.detail.markerId
});
// 导航跳转
uni.openLocation({
latitude: parseFloat(marker.latitude),
longitude: parseFloat(marker.longitude),
name: marker.callout.content,
address: marker.address,
success: function (res) {
console.log('打开系统位置地图成功')
},
fail: function (error) {
console.log(error)
}
})
},
searchInput(e) {
this.search = e.detail.value;
this.QiyeMap();
},
//监听地图拖拽
regionchange(data) {
console.log("拖拽", JSON.parse(JSON.stringify(data)));
// this.mapContext = uni.createMapContext("map", this);//拖拽地图
const that = this;
if (data.type == "end") {
// 获取拖拽后的中心点
that.mapContext.getCenterLocation({
success: function (res) {
that.latitude = res.latitude;
that.longitude = res.longitude;
// 获取后获取对角坐标
that.mapContext.getRegion({
success: (res) => {
const zuobiao = {
northeast: res.northeast,
southwest: res.southwest
};
that.zuobiao = [zuobiao.northeast, zuobiao.southwest];
// 获取缩放级别
that.mapContext.getScale({
success: (res) => {
if (res.scale !== that.scale) {
that.scale = res.scale; // 更新缩放级别
}
}
})
that.QiyeMap();
}
})
}
});
}
},
}
}
</script>
<style lang="scss" scoped>
.search-box {
background-color: white;
// padding: 1rem;
padding-bottom: .5rem;
.search {
width: 90%;
margin: auto;
display: flex;
align-items: center;
font-size: 14px;
// border: 1px solid red;
background-color: #f7f7f7;
padding: 0.4rem;
border-radius: 30px;
.icon-sousuo-copy-copy {
font-size: 14px;
margin-right: 10px;
margin-left: .5rem;
}
}
}
</style>