博客介绍了在uni-app中获取谷歌选点定位的流程，需通过webview跳转谷歌地图，创建webview页面并承载谷歌地图的html页面，还说明了html文件的存放位置。此外，还提及当app内嵌套h5系统需使用谷歌地图，h5接收不到webview返回值时，用原生js方法实现地址解析。
国内需要vpn 和申请谷歌地图的Maps JavaScript API 类型的 key,指引链接这里不详细介绍
一 、我们得通过webview 跳转谷歌地图 ,需要创建一个webview页面,里面跳转承载谷歌地图的html页面,如果是放在本地的话 html文件须遵守规范 放在 “项目根目录下->hybrid->html->google-map.html” 或static目录下
//跳转谷歌地图前页面,比如选择地址
<template>
<view @click="onSkip('/pages/mapWeb')">
即将前往选择地址
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad(e) {
//接收webview传值,能拿到经纬度 详细地址等信息
uni.$on('googleMsg', (data) => {
console.log('接收到值,继续业务处理', data)
});
},
methods: {
//跳转webview
onSkip(url) {
uni.navigateTo({
url: url
})
},
}
}
</script>
//webview 页面 ,如果谷歌地图不是放本地 src 放线上路径即可
<template>
<view>
<web-view style="width: 100vw;height: 100vh;" src="../hybrid/html/google-map.html"
@message="postMessageFun"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
//监听html返回的数据
postMessageFun(e) {
console.log(e.detail.data[0], "77777")
uni.$emit("googleMsg", e.detail.data[0])
}
}
}
</script>
//google-map.html 页面
<!DOCTYPE html>
<html style="width: 100vw;height: 100vh;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src=
最低0.47元/天 解锁文章
扫一扫
1万+
到【灌水乐园】发言
