Ionic百度地图插件使用相关问题

ionic打包应用获得SHA1

ionic命令build
生成keytool
签名apk
查看SHA1签名

申请百度SDK
安装cordova-plugin-baidumaplocation
使用百度地图定位
总结

20190101开发更新：
此插件只限android7以下，高版本可能会定位失败。
亲测android7.0.0可以定位
大坑

ionic打包应用获得SHA1

ionic命令build

ionic打包生成APK命令分为两种ionic cordova build android与ionic cordova build --release android。
前者是生成debug版本APK，后者生成release版本APK。

生成keytool

keytool -genkey -v -keystore demo.keystore -alias demoalias.keystore -keyalg RSA -validity 20000

keytool是工具名称，
-genkey意味着执行的是生成数字证书操作，
-v表示将生成证书的详细信息打印出来；
-keystore demo.keystore 证书的文件名；
-alias demoalias.keystore 表示证书的别名
-keyalg RSA 生成密钥文件所采用的算法；
-validity 20000 该数字证书的有效期；

签名apk

jarsigner -verbose -keystore /yourpath/demo.keystore -signedjar signed.apk unsigned.apk demoalias.keystore

jarsigner是工具名称，
-verbose表示将签名过程中的详细信息打印出来；
-keystore /yourpath/demo.keystore表示之前生成的证书；
-signedjar signed.apk 表示签名后的apk
unsigned.apk 表示未签名的apk
demoalias.keystore 证书的别名

查看SHA1签名

将签名后生成的apk，后缀名改为zip，解压之后进入相应解压的目录，查看META-INF下的.RSA文件即可

keytool -printcert -file  CERT.RSA

申请百度SDK

点击进入百度地图开放平台申请百度地图SDK的相应AK

注册百度开发者账号
创建Android应用，填入相关信息，release(发布版)与debug(开发版)SHA1通过第一步可相应得到，填入即可。

安装cordova-plugin-baidumaplocation

感谢插件原作者的帮助，这次代码是借助于这个插件实现的。
其他插件如cordova-qdc-baidu-location，但是只支持Android版本；IOS开发的有cordova-plugin-bdlocation；

ionic cordova plugin add cordova-plugin-baidumaplocation --variable ANDROID_KEY="SDKAK" --variable IOS_KEY="SDKAK"
# 此处的SDKAK来自于第一步，直接替换SDKAK，也可以最后跟 --save 参数，将插件信息保存到config.xml中 
# 如果只需要Android端或者IOS端，可以只填写一个相应的AK，但是都不填肯定不行

使用百度地图定位

在要使用定位的html页面加入定位button

<button ion-button (click)="locate()">定位测试</button>

在要使用定位的ts文件中引用

declare const baidumap_location: any;

// 进行定位
  locate(){
    let that = this;
    if (typeof baidumap_location === "undefined") { 
      alert("baidumap_location is undefined"); 
      return; 
    }; 
    baidumap_location.getCurrentPosition(function (result) { 
      alert(JSON.stringify(result, null, 4)); 
      that.lng = result.longitude;
      that.lat = result.latitude;
      console.log(that.lng, that.lat);
    }, function (error) { 
      alert(error); 
    });
  }

总结

本文使用的这个插件是我找到的几个百度地图Cordova插件最容易接受的一个版本，cordova插件的plugin.xml、package.json都是齐全的，不用自己生成，省区很大力气，感谢原作者。

打包过程中遇到很多问题，感谢Maxbalance的这篇文章的帮助。

安装其他插件的时候，由于plugin.xml的不同，导致百度地图的.so文件不能正确导入。下列代码是插件的正确导入代码，一定记得将对应的so文件导入到app/libs/下的对应目录。切记。。

<?xml version="1.0" encoding="UTF-8"?>
<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied.  See the License for the
  specific language governing permissions and limitations
  under the License.
-->

<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
        xmlns:android="http://schemas.android.com/apk/res/android"
        id="cordova-plugin-baidumaplocation"
        version="4.0.2">
    <name>BadiduMap Location</name>
    <description>Cordova Geolocation Plugin,use Baidu Map SDK</description>
    <license>Apache 2.0</license>
    <keywords>cordova,baidu,location,geolocation</keywords>
    <repo>https://github.com/aruis/cordova-plugin-baidumaplocation</repo>
    <issue>https://github.com/aruis/cordova-plugin-baidumaplocation/issues</issue>
    
    <engines>
        <engine name="cordova-android" version=">=5.0.0" />
    </engines>

    <js-module src="www/baidumap_location.js" name="baidumap_location">
        <clobbers target="cordova.plugins.baidumap_location" />
        <clobbers target="plugin.baidumap_location" />
        <clobbers target="baidumap_location"/>
    </js-module>

    <preference name="ANDROID_KEY" default=""/>
    <preference name="IOS_KEY" default=""/>
    <preference name="IOS_LOCATION_DESC" default="请点击'好'以允许访问。"/>

    <!-- android -->
    <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="BaiduMapLocation">
                <param name="android-package" value="com.aruistar.cordova.baidumap.BaiduMapLocation"/>
            </feature>
        </config-file>

        <config-file target="AndroidManifest.xml" parent="/*">
            <!-- 这个权限用于进行网络定位-->
            <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
            <!-- 这个权限用于访问GPS定位-->
            <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
            <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
            <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>
            <!-- 获取运营商信息，用于支持提供运营商信息相关的接口-->
            <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission>
            <!-- 这个权限用于获取wifi的获取权限，wifi信息会用来进行网络定位-->
            <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission>
            <!-- 用于读取手机当前的状态-->
            <uses-permission android:name="android.permission.READ_PHONE_STATE"></uses-permission>
            <!-- 写入扩展存储，向扩展卡写入数据，用于写入离线定位数据-->
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
            <!-- 访问网络，网络定位需要上网-->
            <uses-permission android:name="android.permission.INTERNET"/>
            <!-- SD卡读取权限，用户写入离线定位数据-->
            <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"></uses-permission>
        </config-file>

        <config-file target="AndroidManifest.xml" parent="/manifest/application">
            <!-- 在application标签中声明service组件,每个app拥有自己单独的定位service -->
            <service
                    android:name="com.baidu.location.f"
                    android:enabled="true"
                    android:process=":remote">
            </service>
            <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="$ANDROID_KEY"/>
        </config-file>
        
        <framework src="src/android/BaiduMapLocation.gradle" custom="true" type="gradleReference"/>
        <source-file src="src/android/BaiduMapLocation.java" target-dir="app/src/com/aruistar/cordova/baidumap"/>
        <source-file src="libs/android/armeabi/libindoor.so" target-dir="app/libs/armeabi"/>
        <source-file src="libs/android/armeabi/liblocSDK7b.so" target-dir="app/libs/armeabi"/>
        <source-file src="libs/android/armeabi-v7a/libindoor.so" target-dir="app/libs/armeabi-v7a"/>
        <source-file src="libs/android/armeabi-v7a/liblocSDK7b.so" target-dir="app/libs/armeabi-v7a"/>
        <source-file src="libs/android/arm64-v8a/libindoor.so" target-dir="app/libs/arm64-v8a"/>
        <source-file src="libs/android/arm64-v8a/liblocSDK7b.so" target-dir="app/libs/arm64-v8a"/>
        <source-file src="libs/android/x86/libindoor.so" target-dir="app/libs/x86"/>
        <source-file src="libs/android/x86/liblocSDK7b.so" target-dir="app/libs/x86"/>
        <source-file src="libs/android/x86_64/libindoor.so" target-dir="app/libs/x86_64"/>
        <source-file src="libs/android/x86_64/liblocSDK7b.so" target-dir="app/libs/x86_64"/>
        <source-file src="libs/android/BaiduLBS_Android.jar" target-dir="app/libs"/>
    </platform>

    <!--ios-->
    <platform name="ios">
        <config-file parent="/*" target="config.xml">
            <feature name="BaiduMapLocation">
                <param name="ios-package" value="BaiduMapLocation"/>
            </feature>
        </config-file>

        <!--为了能够在iOS9中正常使用非HTTPS协议-->
        <config-file parent="NSAppTransportSecurity" target="*-Info.plist">
            <dict>
                <key>NSAllowsArbitraryLoads</key>
                <true/>
            </dict>
        </config-file>

        <!--定位模式 TODO 设置为前后台永远定位-->
        <!--NSLocationAlwaysUsageDescription / NSLocationWhenInUseUsageDescription-->
        <config-file parent="NSLocationWhenInUseUsageDescription" target="*-Info.plist">
            <string>$IOS_LOCATION_DESC</string>
        </config-file>

        <!--API_KEY-->
        <config-file parent="BaiduMapLocation" target="*-Info.plist">
            <dict>
                <key>IOS_KEY</key>
                <string>$IOS_KEY</string>
            </dict>
        </config-file>

        <!--源文件-->
        <header-file src="src/ios/BaiduMapLocation.h"/>
        <source-file src="src/ios/BaiduMapLocation.mm"/>

        <!--库文件-->
        <framework src="libs/ios/BaiduMapAPI_Base.framework" custom="true"/>
        <framework src="libs/ios/BaiduMapAPI_Location.framework" custom="true"/>
        <framework src="libs/ios/BaiduMapAPI_Search.framework" custom="true"/>
        <source-file src="libs/ios/thirdlibs/libcrypto.a" framework="true"/>
        <source-file src="libs/ios/thirdlibs/libssl.a" framework="true"/>

        <framework src="CoreLocation.framework"/>
        <framework src="SystemConfiguration.framework"/>
        <framework src="libsqlite3.0.tbd"/>
        <framework src="CoreTelephony.framework"/>
    </platform>

</plugin>

Ionic百度地图插件使用相关问题

Ionic百度地图插件使用相关问题

ionic打包应用获得SHA1

ionic命令build

生成keytool

签名apk

查看SHA1签名

申请百度SDK

安装cordova-plugin-baidumaplocation

使用百度地图定位

总结

猜你喜欢