更新记录

1.0.7（2024-09-02） 下载此版本

更改REDME文档

1.0.6（2024-09-02） 下载此版本

修复报错

1.0.5（2024-08-14） 下载此版本

修复App Vue不可用

平台兼容性

天地图位置选择

组件名：zhuo-tianditu-select

安装方式

HBuilderX 2.5.5，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components

开发不易，如果帮助到你的，请支持 有问题请留言，作者会积极更新

基本用法

    <!-- 天地图使用示例 -->
<zhuo-tianditu-select ref="tMap"api-key="******"></zhuo-tianditu-select>

Props

Events

Methods

// 打开地图
this.$refs.tMap.open(104.397894, 31.126855)
// 关闭地图
this.$refs.tMap.close()
// 设置中心点
this.$refs.tMap.open(103.397894, 32.126855)

Slots

 <template v-slot:cards="{row, index}">{{row.address}}</template> 

示列代码

vue2

<template>
    <view class="content">
        <button @click="selectMap"> 选择地图 </button>
        <view v-if="point.address">
            <view>address: {{point.address}}</view>
            <view>lon: {{point.location.lon}}</view>
            <view>lat: {{point.location.lat}}</view>
        </view>
        <!-- 天地图使用示例 -->
        <zhuo-tianditu-select ref="tMap" :icon="icon" :searchType="0" api-key="******"
            @onLoad="LoadComplite" @onSelect="">
            <!-- 自定义cardList样式 事件有绑定，自己写样式即可 -->
            <!-- <template v-slot:cards="{row, index}">{{row.address}}</template> -->
        </zhuo-tianditu-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                icon: null,
                point: {},
            }
        },
        onLoad() {
            // 自定义图片
            const that = this
            uni.getImageInfo({
                src: '../../static/position.png',
                success(res) {
                    that.icon = res.path
                },
            })
        },
        mounted() {},
        methods: {
            LoadComplite() {
                console.log('天地图加载完成')
            },
            (value) {
                this.point = value
            },
            selectMap() {
                // uni.getLocation({
                //     type: 'wgs84',
                //     success: function(res) {
                //         console.log('当前位置的经度：' + res.longitude);
                //         console.log('当前位置的纬度：' + res.latitude);
                //         that.$refs.tMap.open(res.longitude, res.latitude);
                //     },
                //     fail: function(err) {
                //         console.log('获取失败');
                //     },
                // });
                this.$refs.tMap.open(104.397894, 31.126855)
            }
        }
    }
</script>

Vue3:

<template>
    <view class="content">
        <button @click="selectMap"> 选择地图 </button>
        <!-- 天地图使用示例 -->
        <zhuo-tianditu-select ref="tMap" :icon="state.icon" :searchType="0" api-key="******">
        </zhuo-tianditu-select>
    </view>
</template>

<script setup>
    import {
        ref,
        reactive
    } from "vue";
    const tMap = ref()
    const state = reactive({
        icon: ''
    })
    const selectMap = () => {
        tMap.value.open(104.397894, 31.126855)
    };
</script>