更新记录

1.0.0（2025-07-18） 下载此版本

• T0、基于腾讯地图实现，弹窗中搜索/拖动地图，选点/选位置。
• 1、manifest.json 微信小程序配置、Web配置中启用定位
• 2、Web配置选择腾讯地图，添加key
• 3、参数说明：apiKey 腾讯地图官网申请的key
• 4、H5 (3.4.0+)、微信小程序 (基础库 2.9.0+)

平台兼容性

uni-app(4.06)

ziqirj-map-position 地图位置选点

• 组件名：ziqirj-map-position
• 代码块： ChosenPosition
• 关联组件：scss/sass，uni-popup，uni-icons

插件说明

• 基于腾讯地图实现，弹窗中搜索/拖动地图，选点/选位置，首次打开获取个人定位。

使用帮助

• 1、manifest.json 微信小程序配置、Web配置中启用定位
• 2、Web配置选择腾讯地图，添加key
• 3、H5 (3.4.0+)、微信小程序 (基础库 2.9.0+)
• 4、可联系作者，付费申请key

使用说明

组件参数

回调函数

回调函数返回值说明

confirm 返回值

positionInfo: {
    ad_info: { province: '省', city: '市', district: '区县' },
    title: '位置标题',
    address: '地址',
    location: [latitude, longitude] // 坐标
}

方法

使用示例

<template>
    <ziqirj-page-view title="选择位置">
        <uni-section class="mb-10" title="位置选择组件" sub-title="位置选择组件使用演示" type="line" />
        <view style="display: flex; justify-content: center;">
            <uni-tag text="点击选择位置" type="primary" @click="openChosen" />
        </view>
        <view v-if="positionInfo.title" style="padding: 10px;">
            <view style="display: flex; align-items: center; align-content: center; padding-bottom: 10px;">
                <text style="font-size: 14px; color: #333;">省：</text>
                <text style="font-size: 12px; color: #676767;">{{ positionInfo.ad_info.province }}</text>
            </view>
            <view style="display: flex; align-items: center; align-content: center; padding-bottom: 10px;">
                <text style="font-size: 14px; color: #333;">市：</text>
                <text style="font-size: 12px; color: #676767;">{{ positionInfo.ad_info.city }}</text>
            </view>

            <view style="display: flex; align-items: center; align-content: center; padding-bottom: 10px;">
                <text style="font-size: 14px; color: #333;">区/县：</text>
                <text style="font-size: 12px; color: #676767;">{{ positionInfo.ad_info.district }}</text>
            </view>

            <view style="display: flex; align-items: center; align-content: center; padding-bottom: 10px;">
                <text style="font-size: 14px; color: #333;">位置：</text>
                <text style="font-size: 12px; color: #676767;">{{ positionInfo.title }}</text>
            </view>

            <view style="display: flex; align-items: center; align-content: center; padding-bottom: 10px;">
                <text style="font-size: 14px; color: #333;">详细：</text>
                <text style="font-size: 12px; color: #676767;">{{ positionInfo.address }}</text>
            </view>

            <view style="display: flex; align-items: center; align-content: center; padding-bottom: 10px;">
                <text style="font-size: 14px; color: #333;">坐标：</text>
                <text style="font-size: 12px; color: #676767;">{{ JSON.stringify(positionInfo.location) }}</text>
            </view>
        </view>
        <ziqirj-map-position ref="ziqirjChosenPositionRef" api-key="" @confirm='confirmFn'/>
    </ziqirj-page-view>
</template>

<script>
    export default {
        data() {
            return {
                apiKey: '您的腾讯地图key',
                positionInfo: {
                    ad_info: {
                        province: '',
                        city: '',
                        district: ''
                    },
                    title: '',
                    address: '',
                    location: []
                }
            }
        },
        methods: {
            openChosen() {
                this.$refs.ziqirjChosenPositionRef.openPopup()
            },
            closeChosen() {
                this.$refs.ziqirjChosenPositionRef.closePopup()
            },
            confirmFn(res) {
                console.log("confirmFn res", res)
                this.positionInfo = res
            }
        }
    }
</script>

<style>
</style>

依赖组件

scss/sass

uni-popup

uni-icons

如使用过程中有任何问题，或者您对组件有一些好的建议，欢迎留言

紫琪程序猿