【问题标题】:Ionic Google Maps Capacitor离子谷歌地图电容器
【发布时间】:2020-10-18 10:16:02
【问题描述】:

我可以使用这个带电容器的 Ionic Google Maps 插件(https://github.com/mapsplugin/cordova-plugin-googlemaps-doc)吗?我试试

npm install cordova-plugin-googlemaps npm install @ionic-native/googlemaps

但没有成功。我如何用电容器安装它?以及如何获得当前位置?我正在使用 Angular。

我需要使用它,因为原生 Geolocation 不适用于旧的 Android 版本。

【问题讨论】:

    标签: angular typescript ionic-framework maps


    【解决方案1】:

    电容器专用,谷歌地图完美运行。

    我建议你关注这个tutorial。如果不需要,可以忽略教程中的 nativegeocoder 实现。

    以上教程基于将javascript api包含在您的index.html文件中,然后在您的代码中引用它。

    与 google javascript 文档中提到的所有功能完美配合。

    有两种方法可以在离子电容器应用中实现谷歌地图。

    1. 使用 cordova 插件(集成了谷歌地图原生 SDK)
    2. 使用 google maps javascript API

    Read this article to understand the difference

    Another tutorial for implementing google maps

    在您需要访问地图的 .ts 文件中导入语句后,不要忘记将其放入。

    声明 var google;

    一旦你像教程中那样集成它,对于谷歌地理定位,添加这个..

    this.googleGeocoder = new google.maps.Geocoder();
    this.googleGeocoder.geocode({'location': latlng},(results,status)=>{
      if (status === 'OK') {
         // do your stuff
      }
    })
    

    【讨论】:

    • 我会试试的!非常感谢:-)
    【解决方案2】:

    你打错了包名,它是@ionic-native/google-maps,而不是@ionic-native/googlemaps。另外,如果您使用@ionic-native/google-maps,则无需安装其他软件包。

    要安装,首先你必须create Google Maps API keys.

    然后,运行:

    npm install @ionic-native/core@beta @ionic-native/google-maps@beta
    
    ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="..." --variable API_KEY_FOR_IOS="..."
    

    用您的 API 密钥替换 ...s。

    关于获取当前位置,需要使用LocationService.getMyLocation()获取当前位置。 Here 是文档和教程。

    【讨论】:

    • 会的。根据known incompatible plugins list,该问题询问有关Andriod 的问题,cordova-pluigin-googlemaps 将适用于Andriod。
    • 我可以在电容器项目中使用命令“ionic cordova plugin add”吗?例子展示了如何在Index.html上实现,你能在page.ts上展示一个例子吗?
    • 你不能在电容器项目中使用“ionic cordova plugin add”命令。你必须使用“npm i ”然后,你必须在你的字符串中定义api键本机android中的.xml文件..
    • 你不能使用从电容器项目添加的离子科尔多瓦插件
    猜你喜欢
    • 2019-07-15
    • 1970-01-01
    • 2014-12-21
    • 2017-04-14
    • 2018-07-17
    • 2019-12-14
    • 2016-04-07
    • 2016-10-02
    • 2016-01-29
    相关资源
    最近更新 更多