需求分析。
假设在用uni-app在开发一个国外项目。 然而项目要求必须集成谷歌地图。 刚好此时由于自己技术有限无法即成原生地图。在此提供一个集成web地图的方案。 仅供参考。
第一步:首先我们要准备一个科学上网工具。以便可以正常访问谷歌地图。
第二步: 启动项目, 如果此时在真机测试的话无法正常访问地图。 个人建议用选用模拟器时选择Xcode自带的模拟器,有点在于在Hbuildrrx启动项目时如果正常安装了Xcode则会自动启动其自带的模拟器。 不需要任何配置。 而且各个机型之间可以实现随意切换。 在性能方面也比其他模拟器要好且稳定。
第三步:在项目的根目录下创建名为hybrid的文件夹。切文件夹名字必须是这个否则无法识别。此文件夹下放置处理地图的各种业务即正常的html,js,css文件。
第四步:在需要的页面的app页面创建web窗体 以达到嵌入地图的目的。参考文档https://uniapp.dcloud.io/component/web-view?id=web-view。 实现代码如下:
/**
* 把web页面加载到app原生子窗体中
* @param url
* @param style
* @constructor
*/
CreateForms:function ([url,style = {
plusrequire:"none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止
top:uni.getSystemInfoSync().statusBarHeight+44, //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
background:'yellow',}]) {
let [vm] = [this]
// #ifdef APP-PLUS
wv = plus.webview.create("","custom-webview",style)
wv.loadURL(url)
var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
currentWebview.append(wv);//一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭
setTimeout(function() {
// console.log(wv.getStyle())
}, 1000);//如果是首页的onload调用时需要延时一下,二级页面无需延时,可直接获取
// #endif
},
说明。第一个参数表示路径。即上面上传的hybrid里的html文件。注意路径, 第二个参数表示窗体样式。 配置列表参照 https://ask.dcloud.net.cn/article/12811
调用函数即可。 注意路径
vm.CreateForms([`/hybrid/html/local.html?${option.id}`,{
width: '100%',
height: '240px',
plusrequire:"none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止
top:uni.getSystemInfoSync().statusBarHeight+44, //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
background:'transparent',
zindex: 0
}])
这样就可以将web地图集成到app里。 至于窗体和web页面之间的通信可以通过地址携带。 正则表达式匹配。 缺陷在于很难实现双向通信。有问题可以提出。 加以修正。