Uniapp 之使用renderjs实现APP中腾讯地图搜索定位选点

一、效果图

image

二、示例代码

<template>
    <view style="">
        <navBar :fixed="true" :shadow="false" :background-color="primaryColor" color="#fff" title="定位">
            <view slot="left">
                <view @tap="$util.goUrl({url:1,openType:'navigateBack'})" class="iconfont iconfanhui1 ml-md nav_c_text"
                    style="font-size: 40rpx;">
                </view>
            </view>
        </navBar>
        <view :style="{background:primaryColor,height:(navBarHeight)+'px'}"></view>
        
        <view class="" :style="{height: (windowHeight-navBarHeight)+'px'}">
            <view class="" v-html="html" style="width: 100%;height: 100%;padding-bottom: 100rpx;"></view>
            <button style="position: absolute;bottom: 0;width: 100%;" type="primary" @click="MyMap.getpoint">保存定位</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                primaryColor: this.$util.primaryColor,
                navBarHeight: this.$util.getNavBarHeight(),
                windowHeight: uni.getSystemInfoSync().windowHeight,
                html: '',
            }
        },
        onLoad() {
            this.initHtml()
        },
        methods: {
            initHtml() {
                this.html =
                    `<iframe id="mapPage" width="100%" height="100%" frameborder=0 src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=你的key&referer=myapp"></iframe>`;
            },
            getData(d) {
                console.log(d)
            }
        }
    }
</script>

<script module="MyMap" lang="renderjs">
    export default {
        data() {
            return {
                lat: '',
                lng: '',
                address: ''
            }
        },
        mounted() {
            window.removeEventListener('message', this.onMessage)
            window.addEventListener('message', this.onMessage)
        },
        methods: {
            onMessage(event) {
                var loc = event.data;
                if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
                    console.log('location', loc);
                    this.lat = loc.latlng.lat;
                    this.lng = loc.latlng.lng;
                    this.address = loc.poiaddress;
                }
            },
            getpoint(e, o) {
                let data = {
                    lat: this.lat,
                    lng: this.lat,
                    address: this.address
                }
                if (o) {
                    o.callMethod('getData', data)
                } else {
                    this.$o.callMethod('getData', data)
                }
            }
        }
    }
</script>
<style>

</style>

 

 
 
posted @ 2025-08-16 14:25  样子2018  阅读(15)  评论(0)    收藏  举报