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

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

定義一下輔助方法用來判斷當前是否是嵌入在微信小程序的webview中

// 獲取當前h5運行的環(huán)境
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') {
                    // 如果是小程序，因為打開的是騰訊地圖，所以坐標都需要轉(zhuǎn)成跟高德一樣的著觉，當前坐標是百度地圖時轉(zhuǎn)成高德
                    if (this.detail.positionType * 1 === 1) {
                        // 對數(shù)據(jù)作坐標轉(zhuǎn)換
                        obj = BaiduGaoDeLngLatConvert(obj, 2, 'location')
                        this.initialPosition = { lng: obj.lng, lat: obj.lat }
                    } else {
                        this.initialPosition = { lng: lng, lat: lat }
                    }
                } else {
                    // 對數(shù)據(jù)作坐標轉(zhuǎn)換
                    obj = BaiduGaoDeLngLatConvert(obj, this.mapConfig.type, 'location')
                    this.initialPosition = { lng: obj.lng, lat: obj.lat }
                }
            }
        },
    async showMap() {
            let env = await getH5InEnv()
            console.log('獲取執(zhí)行環(huán)境', env)
            if (env === 'miniprogram') {
                // 如果是在微信小程序里打開
                // 獲取目標地點經(jīng)緯度嘲更，將經(jīng)緯度拼接成字符串
                let { lng, lat } = this.initialPosition
                // 調(diào)用官方api搔预，跳轉(zhuǎn)至提前在小程序中寫好的‘中轉(zhuǎn)頁’髓梅，拼接參數(shù)可參考wx.openLocation可配置參數(shù)按需傳進去
                wx.miniProgram.navigateTo({
                    url: `/pages/mapPage/mapPage?longitude=${lng}&latitude=${lat}&address=${this.detail.address}`
                })
            } else {
                this.mapVisible = true
            }
        } 
}

uni-app中小程序中編寫 mapPage的地圖呈現(xiàn)頁面

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

<script>
// 地圖中轉(zhuǎn)頁面
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