分类目录

登录

统计信息

  • 日志总数:240篇
  • 评论总数:280条
  • 分类总数:3个
  • 标签总数:543个
  • 友情链接:11个
  • 网站运行:3469天

西安市公共自行车 微信小程序 入口扫描,扫我进入~

个人信息

·网名:青年白
·生日:1991年9月17日
·博客: http://www.baikeyang.com
·邮箱:baikeyang@vip.qq.com
·籍贯: 陝西省汉中市
·工作: 杭州鸿泉数字设备有限公司
·职位:Java软件开发工程师
·地址:西安市高新区丈八一路绿地SOHO
·   同盟A座606室
·时间:2015.07─2019.12
·工作: 西安易一电子科技有限公司
·职位:Java中级软件开发工程师
·地址:西安市高新区科技二路软件园
·   西岳阁403室
·时间:2014.05─2015.06
·工作:陕西齐力集团
·职位:初级软件开发工程师
·地址:西安市建工路19号新城科技产业园
·   华企大厦7层
·时间:2013.05─2014.04
现在位置:    首页 > 技术乱弹 > 正文
关于在Flutter实现Google地图的方法
技术乱弹 暂无评论
由于项目需要开发一款国际化APP(多语种)。公司是一家国内的车联网企业,车辆地图监控为项目的基础功能模块。在国内项目用的是高德,高德国际化支持太差劲,在国际化中直接被PASS掉了。为了能达到全球化的位置监控展示,尝试过MapBox,最后考虑种种还是使用Google地图。
话说,Google在国内的现状目前是啥样我想大家也都清楚,在9月份的某一天突然发现国内的Google地图网页也被重定向google.cn。看来这是真的打算撤退的节奏啊。偶然间在网上看到说 用电脑访问 http://www.google.cn//maps 可以访问,真的神奇了。
虽然Google国内地图被关闭了,但是好在API可以正常使用。
项目是开发一款基于IOS/Android的移动端软件,在调研前期选择了Flutter去开发,因为看到Flutter对IOS/Android的支持还是不错的,一套代码编译为两个平台的软件。
当然,Google Map 官方也当然提供的有Flutter 的插件 google_maps_flutter,开箱即用很是方便。直接上手。
基于google_maps_flutter的开发准备工作:
1、首先需要Google地图的API Key
2、手机需要Google 服务全家桶(不懂请自行度娘喔~ )
添加依赖:
dependencies:
  google_maps_flutter: ^0.5.21+12
插件的使用方法在【https://pub.dev/packages/google_maps_flutter】中也介绍的很详细。直接copy代码走起,如下~

在运行代码之前需要配置API Key :

Android:

在android/app/src/main/AndroidManifest.xml中配置:

IOS :

在Info.plist中配置如下:

两种配置Key的方法:

方法一:

在ios/Runner/AppDelegate.m中配置Key:

方法二:

在ios/Runner/AppDelegate.swift中配置Key

OK,开始运行。

嗯~???? 设备不支持?我的模拟器没有安装Google 服务全家桶。目前国内的Android手机都已经将Google内置服务去掉了。然而Google地图在Android却需要Google服务的支持。这就有些尴尬了。总不可能以后凡是使用该APP的用户都强迫安装这个吧?客户首先就不买单。

于是开始第二种尝试,用HTML实现地图并嵌套在APP中。

方案实现思路:使用webview嵌套一个页面,在页面中展示Google地图。通过页面JS回调Flutter里面的方法;Flutter通过webview_flutter插件提供的evaluateJavascript函数调用页面上的方法操作页面地图(比如地图缩放、地图绘制、地图查找)

准备工作:

1、首先需要Google地图的API Key
依赖:
dependencies:
  webview_flutter: ^0.3.15+1
代码:







以上核心代码是我进行过整理和一定的简单封装,主要是方便使用。开始运行。
搞定。
嵌套的页面地址是http://map.bkybk.com/gmap_flutter.html,关于这个html的源码我这里就贴了,感兴趣的可以自己去把页面的代码复制出来喔~

 

本文版权归青年博客所有,转载引用请完整注明以下信息:
本文作者:BaiKeyang
本文地址:关于在Flutter实现Google地图的方法 | 青年博客

发表评论

留言无头像?