UniApp 制作高德地图插件

这篇具有很好参考价值的文章主要介绍了UniApp 制作高德地图插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、下载Uni插件项目

在Uni官网下载Uni插件项目,并参考官网插件项目创建插件项目.

开发者须知 | uni小程序SDK

如果下载下来项目运行不了可以参考下面链接进行处理

UniApp原生插件制作_wangdaoyin2010的博客-CSDN博客

2、引入高德SDK

2.1 在高德官网下载对应SDK

相关下载-Android 地图SDK | 高德地图API

2、引入高德SDK

Android Studio 配置工程-创建工程-开发指南-Android 地图SDK | 高德地图API

也可以参考:高德地图:No implementation found for void com.autonavi.base.ae.gmap.GLMapEngine.nativeInitParam_易寻资料的博客-CSDN博客

 注意:一定要按照官网方式进行引入,且多种方式不能混合起引用,本人比较建议使用方法一

3、设置ApiKey和更新隐私合规

调用如下方法进行隐私合规更新和设置APiKey

可以参考:开发者注意事项-创建工程-开发指南-iOS 地图SDK | 高德地图API

MapsInitializer.updatePrivacyShow(this.mUniSDKInstance.getContext(), true, true);
MapsInitializer.updatePrivacyAgree(this.mUniSDKInstance.getContext(), true);
MapsInitializer.setApiKey(apiKey);

4、创建一个组件打开高德离线地图

package com.mnyc.amap.amap3dsearch;

import android.content.Context;
import android.content.Intent;
import android.util.Log;
import android.view.View;
import android.widget.Button;

import androidx.annotation.NonNull;

import com.alibaba.fastjson.JSONObject;
import com.amap.api.maps.MapsInitializer;
import com.amap.api.maps.offlinemap.OfflineMapActivity;

import java.util.HashMap;
import java.util.Map;

import io.dcloud.feature.uniapp.UniSDKInstance;
import io.dcloud.feature.uniapp.ui.action.AbsComponentData;
import io.dcloud.feature.uniapp.ui.component.AbsVContainer;
import io.dcloud.feature.uniapp.ui.component.UniComponent;
import io.dcloud.feature.uniapp.ui.component.UniComponentProp;

/**
 * 自定义打开离线地图组件按钮
 */
public class MnycAMapOfficelineButton extends UniComponent<Button> implements View.OnClickListener {
    Context context;
    Button button;
    private static final String TAG = "MnycAMapOfficelineButton";

    public MnycAMapOfficelineButton(UniSDKInstance instance, AbsVContainer parent, AbsComponentData componentData) {
        super(instance, parent, componentData);
    }

    @Override
    protected Button initComponentHostView(@NonNull Context context) {
        this.context = context;
        button = new Button(context);
        button.setText("离线地图");
        button.setOnClickListener(this);
        return button;
    }

    @Override
    public void onClick(View view) {
        try {
            context.startActivity(new Intent(this.context, OfflineMapActivity.class));
        } catch (Exception e) {
            exception(e);
            Log.e(TAG, e.getMessage());
        }
    }

    @UniComponentProp(name = "label")
    public void setLongitude(String label) {
        button.setText(label);
    }

//    将打开离线地图异常进行抛出成Uni中的事件
    public void exception(Exception exception) {
        JSONObject dataJson=new JSONObject();
        JSONObject detailJson=new JSONObject();
        detailJson.put("exception", exception);
        //目前uni限制 参数需要放入到"detail"中 否则会被清理
        dataJson.put("detail", detailJson);
        fireEvent("exception", dataJson);
    }
}

5、错误场景

错误1:离线地图组件没有城市列表

UniApp 制作高德地图插件,uni-app,高德地图

问题:没有调用高德更新隐私合规两个方法,进行调用即可

错误2:地图组件为白色

问题:没有调用高德更新隐私合规两个方法,进行调用即可

错误3:地图为黑屏、但是有高德Logo和放大缩小按钮

UniApp 制作高德地图插件,uni-app,高德地图

 问题:so文件引入错误,按照官网方法1引入sdk(so文件),注意不能多种方式混合引入

错误4:离线地图组件“下载出现异常”在AS中调试或者使用真机调试可以正常下载地图,打包成插件使用UniApp进行调试时出现“下载出现异常”

UniApp 制作高德地图插件,uni-app,高德地图

问题:有可能是高德ApiKey没有正确配置

解决思路:不适用高德离线地图组件,通过如下代码手动下载,在OfflineMapManager第二个参数对应类的onDownload方法中可以查看具体的错误代码是多少

/构造OfflineMapManager对象 
OfflineMapManager amapManager = new OfflineMapManager(this, this);
//按照citycode下载
amapManager.downloadByCityCode(String citycode);
//按照cityname下载
amapManager.downloadByCityName(String cityname);

离线地图状态值UniApp 制作高德地图插件,uni-app,高德地图

 每个值对应具体说明

UniApp 制作高德地图插件,uni-app,高德地图

 OfflineMapStatus 说明

注意:使用同一个Key在AS中调试下载等正常,因为在AS中使用的是调试模式,然后SDK中带了调试证书,所以可以正常下载。打包成SDk后放到Uni中生成自定义基座进行调试,这样在高德地图SDK这块就是使用的是你自己配置的ApiKey证书,所以如果这个证书配置错误就出现下载失败。

注意:目前发现不管ApiKey是否设置正确都地图都能够正常显示,只是离线地图下载失败,所以这点需要注意。

 文章来源地址https://www.toymoban.com/news/detail-664570.html

到了这里,关于UniApp 制作高德地图插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【备忘录】uni-app的地图相关组件操作,uni-app接入腾讯地图API的具体实现

    官方帮助文档:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview 进行一些简单的配置 Uniapp提供的位置相关的服务: https://uniapp.dcloud.net.cn/api/location/location.html UniApp提供的地图组件 https://uniapp.dcloud.net.cn/component/map.html 文档针对微信小程序进行设置,其他端使用这些组件还需要参

    2023年04月26日
    浏览(64)
  • uniapp 开发安卓App实现高德地图路线规划导航

    描述这个技术是做什么的/什么情况下会使用到这个技术,学习该技术的原因,技术的难点在哪里。控制在50-100字内。 uniapp的map组件中导航路线的展示。是uniapp开发app时引入地图导航的实现方式。技术难点在于实现map组件时对于属性以及函数的细节使用很容易出现一些奇怪的

    2024年02月01日
    浏览(54)
  • uniapp上高德(百度)地图API的使用(APP安卓)

    前言 由于在app中没有document,window等对象,所以使用在pc端传统方法引入的方式,将会发现无法引用成功,会出现白屏现象。 目前有两种解决方式: 使用uniapp的web-view方式(百度地图) 使用renderjs来调用document等js对象(高德地图) map.vue: 中间实时显示地图上图标的个数,以及

    2023年04月10日
    浏览(94)
  • uni-app引入地图map组件--APP开发

    需求场景:使用uni-app地图组件,实现APP开发 开发环境:Mac,HbuildX3.4.14 测试环境:iOS真机调试 一、流程 1、关于Uini-app的map组件:官方文档说明。map组件是原生组件,目前只针对原生APP开发,因此通过app-nvue实现,同时选择的地图服务商只能是高德地图。 2、创建高德地图应用

    2024年02月15日
    浏览(66)
  • 【App端】uni-app使用百度地图api和echarts省市地图下钻

    近期的app项目中想加一个功能,展示全国各地的某一数据统计情况,想来想去,用echarts做地图数据可视化直观且美观。于是就去研究了如何使用,其实在移动端使用echarts地图踩的bug挺多的,总结如下。 JavaScript API GL账号和获取密钥 1、获取SHA1:Android平台云端打包 - 公共测试

    2024年02月11日
    浏览(51)
  • uni-app根据腾讯地图接口三级联动组件

    有时候很懵逼,因为需要用到腾讯地图接口的三级联动,习惯问问度娘,结果出来了我几年前用JQ写的,好吧,还是自己撸一个现在用的吧 组件使用得是uni-popup弹窗,picker-view 滑动选择地址 访问腾讯地图接口使用的是 vue-jsonp  在main.js引入 组件address.vue 组件只需要填写你自

    2024年01月20日
    浏览(59)
  • 【App端】uni-app使用echarts和百度地图api

    近期的app项目中想加一个功能,展示全国各地的某一数据统计情况,想来想去,用echarts做地图数据可视化直观且美观。于是就去研究了如何使用,其实在移动端使用echarts地图踩的bug挺多的,总结如下。 JavaScript API GL账号和获取密钥 1、获取SHA1:Android平台云端打包 - 公共测试

    2024年02月11日
    浏览(55)
  • 【uniapp】uniapp使用高德地图定位打包成安卓app的一些记录,比如打包后定位失效、

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 我的项目是uniapp打包成安卓app,这里不会讲解微信小程序之类的踩坑,只记录app端的用法 首先要知道,定位是返回经纬度,地图是渲染页面。这个不能搞混。 在uniapp中有map组件,具体可看官网的文档

    2023年04月16日
    浏览(46)
  • Uni App + Vue3 引入高德小程序插件Js文件失败

      使用uni app模板开发微信小程序过程中引入高德地图小程序插件失败, 由于本人是第一次使用vue开发对vue2和3的模块引入方式并不甚了解,官方文档也并未提及所以踩了坑,特记录一下, 先看代码: 根据官方文档这里引入js插件后即可在onload函数实例化一个AMapWX对象 这里实

    2024年02月10日
    浏览(55)
  • uni-app 小程序使用腾讯地图完成搜索功能

    前言 使用uni-app开发小程序时候使用腾讯地图原生SDK是,要把原生写法转成vue写法在这记录一下。 我们需要注意的是使用高德地图时我们不仅要引入SDK,还要再uni-app中配置允许使用。 由于uni-app内置地图就是腾讯,所以获取位置的api,uni.getLocation坐标不用转换,直接使用。

    2024年02月08日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包