h5页面中引入微信的js-sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

定义一下辅助方法用来判断当前是否是嵌入在微信小程序的webview中

// 获取当前h5运行的环境
export function getH5InEnv() {
    var ua = navigator.userAgent.toLowerCase()
    return new Promise((resolve, reject) => {
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            // ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
            wx.miniProgram.getEnv((res) => {
                if (res.miniprogram) {
                    resolve('miniprogram')
                } else {
                    resolve('wechat')
                }
                return
            })
        }
        resolve('h5')
    })
}

页面中打开地图的方法

methods: {
    async handleMapPosition() {
            if (this.detail.position) {
                let env = await getH5InEnv()
                let [lng, lat] = this.detail.position.split(',').map((x) => x * 1)
                let obj = { lng, lat, positionType: this.detail.positionType || 1 }
                if (env === 'miniprogram') {
                    // 如果是小程序，因为打开的是腾讯地图，所以坐标都需要转成跟高德一样的，当前坐标是百度地图时转成高德
                    if (this.detail.positionType * 1 === 1) {
                        // 对数据作坐标转换
                        obj = BaiduGaoDeLngLatConvert(obj, 2, 'location')
                        this.initialPosition = { lng: obj.lng, lat: obj.lat }
                    } else {
                        this.initialPosition = { lng: lng, lat: lat }
                    }
                } else {
                    // 对数据作坐标转换
                    obj = BaiduGaoDeLngLatConvert(obj, this.mapConfig.type, 'location')
                    this.initialPosition = { lng: obj.lng, lat: obj.lat }
                }
            }
        },
    async showMap() {
            let env = await getH5InEnv()
            console.log('获取执行环境', env)
            if (env === 'miniprogram') {
                // 如果是在微信小程序里打开
                // 获取目标地点经纬度，将经纬度拼接成字符串
                let { lng, lat } = this.initialPosition
                // 调用官方api，跳转至提前在小程序中写好的‘中转页’，拼接参数可参考wx.openLocation可配置参数按需传进去
                wx.miniProgram.navigateTo({
                    url: `/pages/mapPage/mapPage?longitude=${lng}&latitude=${lat}&address=${this.detail.address}`
                })
            } else {
                this.mapVisible = true
            }
        } 
}

uni-app中小程序中编写 mapPage的地图呈现页面

<template>
    <view> </view>
</template>

<script>
// 地图中转页面
export default {
    data() {
        return {
            isBack: false
        };
    },
    onLoad(options) {
        this.showWxMap(options);
    },
    onHide() {
        this.isBack = true;
    },
    onShow() {
        if (this.isBack) {
            uni.navigateBack({ delta: 1 })
        }
    },
    methods: {
        showWxMap(options) {
            const { latitude, longitude, address } = options;
            uni.openLocation({
                latitude: Number(latitude),
                longitude: Number(longitude),
                address: address || '目的地',
                scale: 18
            });
        }
    }
};
</script>

<style lang="scss"></style>

image.png