更新记录

1.0.0(2023-12-11)

在天地图上选择位置,返回选中位置信息,包括经纬度,详细地址等


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.12 app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

注意

1.使用该插件需要申请天地图浏览器端的key(https://console.tianditu.gov.cn/api/key)

2.选择位置返回坐标的坐标系为wgs84

3.示例apk下载地址https://mp-4e2e0693-4233-4eb5-91f7-14d69c806549.cdn.bspapp.com/tdt_xuanwz.apk

组件

<sylj-selectLocation ref="selectLocationPop" @ok="selectedOk"></sylj-selectLocation>
属性说明
属性名 类型 说明
@ok EventHandle 选择完位置,点击确定触发

触发选择位置

参数说明
参数名 类型 说明
x Number 经度(wgs84)
y Number 纬度(wgs84)
apikey String 天地图浏览器端key(https://console.tianditu.gov.cn/api/key)
this.$refs.selectLocationPop.open(x, y, apikey);
//示例
this.$refs.selectLocationPop.open(121,32, 'asdasdasdads');

示例代码

<template>
    <view class="content">
         <view class="">

         </view>
        <button @tap="xuanweizhi" style="margin-top: 160px;">选取位置</button>
        <view class="dqwz" v-if="name">
        当前位置:   {{name}}
        </view>
        <view class="dqwz" v-if="name" style="margin-top: 20px;">
        lng:    {{lng}}
        </view>
        <view class="dqwz" v-if="name"  style="margin-top: 20px;">
        lat:    {{lat}}
        </view>
        <sylj-selectLocation ref="selectLocationPop" @ok="selectedOk"></sylj-selectLocation>
    </view>
</template>

<script>

    export default {

        data() {
            return {
                name: "",

                lng: "",
                lat: ""
            }
        },
        onLoad() {

        },
        methods: {
            selectedOk(data) {
                console.log(data)
                this.ismap = false
                this.name = data.name
                this.lng = data.location.lon
                this.lat = data.location.lat
            },
            xuanweizhi() {
                var that = this;
                if (that.lng) {

                    that.$refs.selectLocationPop.open(that.lng, that.lat, '********');
                } else {
                    that.$refs.selectLocationPop.open(121, 32, '*****');
                }

                /*uni.showLoading({
                    //content: '',
                    mask: true
                })
                uni.getLocation({
                    type: 'wgs84',
                    success: function(res) {
                        uni.hideLoading();
                        console.log('当前位置的经度:' + res.longitude);
                        console.log('当前位置的纬度:' + res.latitude);
                         that.$refs.selectLocationPop.open( res.longitude,res.latitude,'******');  

                    },
                    fail: function(err) {
                        console.log('获取失败');
                        uni.hideLoading();

                    },

                });*/

            },
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .dqwz{
        width: 90%;
        margin: 0 auto;
        margin-top: 50px;
        text-align: left;
        font-size: 14px;
        color: #666666;
    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问