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

前言

使用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>
相关推荐
你我哈13 小时前
微信小程序-点餐(美食屋)02开发实践
微信小程序·小程序·html·php·美食
漏刻有时14 小时前
微信小程序高级开发(2):保存远程海报图片到相册(权限检查、下载图片、保存图片、错误处理)
微信小程序·小程序·notepad++
会发光的猪。16 小时前
如何获取小程序的code在uniapp开发中
前端·小程序·uni-app
duansamve16 小时前
Uniapp开发总结
uni-app
至尊鸡17 小时前
今天也是记录小程序进展的一天(破晓时8)
前端·科技·小程序·前端框架
说私域17 小时前
互联网产品品牌形象构建与开源AI智能名片S2B2C商城小程序的应用研究
人工智能·小程序·开源
程序员徐师兄19 小时前
Java实战项目-基于 springboot 的校园选课小程序(附源码,部署,文档)
java·spring boot·小程序·校园选课·校园选课小程序·选课小程序
林涧泣1 天前
【Uniapp-Vue3】页面和路由API-navigateTo及页面栈getCurrentPages
前端·vue.js·uni-app
Komorebi゛1 天前
【uniapp】获取上传视频的md5,适用于APP和H5
前端·javascript·uni-app
林涧泣1 天前
【Uniapp-Vue3】动态设置页面导航条的样式
前端·javascript·uni-app