小程序 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点击事件 需要填写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>