CocosCreator系列——接入高德地图sdk获取经纬度信息图文详解

CocosCreator接入高德地图sdk获取经纬度信息图文详解

先看效果
在这里插入图片描述

1.首先去 高德开放平台.申请key
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
点击添加
在这里插入图片描述
接下来该获取发布版和调试版的SHA1了,首先打开cmd命令窗口
输入命令:cd .android(首先进入用户系统的安卓文件夹)
然后输入命令:keytool -list -v -keystore debug.keystore
然后会提示输入密码,输入:android 然后回车注意:这个时候输入密码是不会显示的,输入完成以后直接回车就好,这个时候就可以看到这个时候就得到了调试版的SHA1,如下图

在这里插入图片描述
接下来是发布版的SHA1,我是用的Android studio来获取的,首先打开Android studio导入打开工程,选择Build,然后Generate Signed Bundle/APK
在这里插入图片描述
然后选择APK,Next
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
这个时候我们需要用到的jks文件已经输出好了,找到刚才自己定义的输出文件夹
在这里插入图片描述
这个时候再次打开cmd命令台重复调试版,输入cd .android进入安卓文件夹,然后输入命令keytool -list -v -keystore D:\Android\AndroidKey\test.jks(完整版文件路径),然后输入密码:android,然后回车

在这里插入图片描述
至此两个版本的SHA1全部获取完毕,接下来就是包名,包名就是自己打包apk文件是的包名,然后提交
在这里插入图片描述
提交后会得到key,到时配置sdk时会用到,记下来
在这里插入图片描述
至此前期全部准备工作全部完毕,接下来该写代码了
首先是js客户端代码

cc.Class({
   
    extends: cc.Component,

    properties: {
   
        label: {
   
            default: null,
            type: cc.Label
        },
        // defaults, set visually when attaching this script to the Canvas
        text: 'Hello, World!',
    },

    // use this for initialization
    onLoad: function () {
   
        this.label.string = this.text;
        if (cc.sys.isNative && cc.sys.os == cc.sys.OS_ANDROID) {
   
            this.schedule(() => {
   
                this.onGetLocation();
            }, 3)
        }
    },

    onGetLocation() {
   
        var localtionInfo = jsb.reflection.callStaticMethod("org/cocos2dx/javascript/AppActivity", "getLocationInfo", "()Ljava/lang/String;");
        if (!localtionInfo ) {
   
            cc.log("当前无返回!!!!!!!!!!!!!!!!!!!!!!!!");
            return
        }
        this.label.string = "拿到位置信息\n:" + localtionInfo ;
    },

把下载的高德sdk的jar文件导入到Android studio工程目录下app文件夹下的libs文件夹下,如果没有,则新建一个libs文件夹,如下图
在这里插入图片描述
然后配置AndroidManifest.xml文件权限

    <!-- Normal Permissions 不需要运行时注册 -->
    <!-- 获取运营商信息,用于支持提供运营商信息相关的接口 -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <!-- 用于访问wifi网络信息,wifi信息会用于进行网络定位 -->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    <!-- 这个权限用于获取wifi的获取权限,wifi信息会用来进行网络定位 -->
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
    <uses-permission android:name="android.permission.CHANGE_CONFIGURATION"/>
    <!-- 请求网络 -->
    <uses-permission android:name="android.permission.INTERNET"/>
    <!-- 不是SDK需要的权限,是示例中的后台唤醒定位需要的权限 -->
    <uses-permission android:name="android.permission.WAKE_LOCK"/>
    <!-- 需要运行时注册的权限 -->
    <!-- 用于进行网络定位 -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <!-- 用于访问GPS定位 -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <!-- 用于提高GPS定位速度 -->
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>
    <!-- 写入扩展存储,向扩展卡写入数据,用于写入缓存定位数据 -->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <!-- 读取缓存数据 -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <!-- 用于读取手机当前的状态 -->
    
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用 Vue 和高德地图JavaScript API 来获取经纬度信息。下面是一个简单的示例: 1. 首先,在你的 Vue 项目中安装高德地图JavaScript API。你可以通过在 HTML 文件的 `<head>` 标签中添加以下代码来引入高德地图的 API: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script> ``` 将 `YOUR_API_KEY` 替换为你自己的高德地图 API 密钥。 2. 在你需要获取经纬度信息的组件中,添加一个地图容器和一个按钮: ```html <template> <div> <div id="mapContainer"></div> <button @click="getCoordinates">获取经纬度</button> </div> </template> ``` 3. 在组件的 `<script>` 标签中,添加获取经纬度的方法: ```javascript <script> export default { methods: { getCoordinates() { // 创建地图实例 const map = new AMap.Map('mapContainer', { zoom: 16, // 设置地图缩放级别 center: [116.397428, 39.90923], // 设置地图中心点坐标 }); // 添加点击事件监听器 map.on('click', (e) => { const { lng, lat } = e.lnglat; // 获取点击位置的经纬度 // 在这里可以进行经纬度的后续处理,比如发送到服务器等 console.log(`经度:${lng},纬度:${lat}`); }); }, }, }; </script> ``` 通过以上代码,当用户点击 "获取经纬度" 的按钮时,会在控制台输出经纬度信息。 注意:以上代码只是一个简单示例,你可以根据自己的需求进行进一步的开发和优化。同时,如果你需要更多高德地图 API 的功能和详细参数配置,请参考高德地图开发文档。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值