uni-app开发iOS和安卓应用时在缺少原生开发时如果集成web google地图

需求分析。

假设在用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页面之间的通信可以通过地址携带。正则表达式匹配。缺陷在于很难实现双向通信。有问题可以提出。加以修正。

雯雯小可爱

发布了6 篇原创文章 · 获赞 49 · 访问量 2万+

私信关注

uni-app开发iOS和安卓应用时在缺少原生开发时如果集成web google地图

猜你喜欢