更新记录

1.0.1（2024-07-26） 下载此版本

优化使用说明

1.0.0（2024-07-26） 下载此版本

使用renderjs方式，将腾讯地图嵌入页面。支持APP内使用。

平台兼容性

qq-renderjs-map

组件代码

qq-renderjs-map.vue

<template>
    <view class="container">
        <iframe id="mapPage" width="100%" height="100%" frameborder=0
            :src="src">
        </iframe>
        <view class="z-btn-plus map-btn">
            <button @click="myxd.selectOk">选定</button>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['mapKey'],
        data(){
            return {
                longitude: 116.39742,
                latitude: 39.909,
                address: '122323',
            }
        },
        computed: {
            src(){
                let src= `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${this.mapKey}&referer=myapp`
                return src
            }
        },
        methods:{
            parentSelectOk(obj){
                console.log('选定了', obj);
                let self = this
                self.address = obj.address
                uni.$emit('locateOk', {latitude: obj.latitude, longitude: obj.longitude, address: obj.address})
                uni.navigateBack()
            }
        },
    }
</script>
<script module="myxd" lang="renderjs">
    let obj = {}
    export default {
        mounted(){
            window.addEventListener('message', function(event) {
                // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
                var loc = event.data;
                if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                  console.log('location', loc);
                } 
                obj.latitude = loc.latlng.lat
                obj.longitude = loc.latlng.lng
                obj.address = loc.poiaddress
                console.log('myxd obj', obj);
            }, false);
        },
        methods:{
            selectOk(event, ownerInstance){
                ownerInstance.callMethod('parentSelectOk', obj)
            }
        }
    }
</script>

<style scoped>
.z-btn-plus {
    position: fixed;
    bottom: 20rpx;
    right: 10rpx;
    z-index: 1;
    /* #ifdef APP-PLUS */
    opacity: 0.6;
    /* #else APP-PLUS */
    opacity: 0.6;
    /* #endif */
}
.container {
    /*地图(容器)显示大小*/
    width:100%;
    height: 1200rpx;
}
.map-btn {
    position: fixed;
    bottom: 20%;
    right: 10rpx;
}
</style>

地图页面引入组件

qqmap.vue

<template>
    <view>
        <qq-renderjs-map :mapKey="mapKey"></qq-renderjs-map>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                mapKey: ''
            }
        },
        onLoad(options){
            this.mapKey = options.mapKey
        },
        methods: {

        }
    }
</script>

<style>

</style>

页面跳转地图页面：

index.vue

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view>
            <view>纬度: {{latitude}}</view>
            <view>经度: {{longitude}}</view>
            <view>地址: {{address}}</view>
        </view>
        <button @click="selectClick">选择地点</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: 'Hello',
            latitude: '',
            longitude: '',
            address: '',
            mapKey: 'your key' // 你的腾讯地图key
        }
    },
    onLoad() {

    },
    methods: {
        selectClick(){
            let self = this
            // 监听选定事件
            uni.$once('locateOk',function(data){
                console.log('监听到事件来自 locateOk ，携带参数 data 为：', data);
                self.address = data.address
                self.latitude = data.latitude
                self.longitude = data.longitude
            })
            uni.navigateTo({
                url: `/pages/qqmap/qqmap?mapKey=${this.mapKey}`
            })
        }
    }
}
</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;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

地图选定后，通过uniapp的 uni.$emit和 uni.$once 实现数据传递，获得选择的点信息。

注意事项

把index.vue中的mapKey替换为你的qq地图key，需要开通逆地址解析和地点搜索。