小程序 uniapp 地图自定义内容呈现，获取中心点，获取对角经纬度，首次获取对角经纬度

前言

使用uniapp 小程序使用地图，我使用的是uniapp原生的地图，实现根据坐标在地图上显示自定义内容，首次加载获取坐标对角经纬度，通过对角经纬度给后端，进行只显示当前屏幕内的自定义内容，在通过拖拽事件，加载范围内（对标坐标经纬度）显示需要加载的内容，以及中心点，地图层级。

在这里插入图片描述

部分代码解释

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 ： 获取缩放级别

全部代码

<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点击事件 需要填写idtitle: '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>