uniapp 开发app引入map模块

最新推荐文章于 2023-11-30 11:48:33 发布

善妒的蝎子

最新推荐文章于 2023-11-30 11:48:33 发布

阅读量2.3k

点赞数

文章标签： javascript html5 前端 vue.js

本文链接：https://blog.csdn.net/qq_36281882/article/details/121380522

版权

刚开始页面调试ok 打包后，map模块功能无法使用，报如下错误：

是map模块权限未开启导致。

下面讲一下整个从报错到使用的流程：

1. 打开项目进入manifest.json -> App模块配置

勾选如下，需要配置appkey

2. 我这边配置的高德地图appkey 以此为例，进入高德地图开放平台 -- > 控制台高德开放平台 | 高德地图API高德开放平台官网https://lbs.amap.com/

3. 进入我的应用去添加

4. 这里选服务平台为安卓 (ios的下次说)

5. 获取ShAl参考下面两篇文章：

Android Studio获取开发版SHA1值和发布版SHA1值的史上最详细方法 - ........lhh - 博客园

android Studio keytool' 不是内部或外部命令，也不是可运行的程序或批处理文件_Tcoy.Lin-CSDN博客

6. PackageName 这个由个人自己填写

7. 提交，就生成了

8. 打开项目进入manifest.json -> App模块配置去配置appkey

9. 打包自定义基座，选择自定义基座，重新运行项目

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

善妒的蝎子

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

uniapp ios原生插件开发之module

Rey的技术博客

07-09

1630

在文章《uniapp ios原生插件开发 (framework,cocoapods)》中我们已经介绍了Module 类型的插件及其创建过程，却没有深入的介绍Module类型插件开发过程中所涉及到的技术点。本文呢就将重点放在对这些技术点的使用上进行详解，算是是对上篇文章的一个补充与扩展。module：不需要参与页面布局，只需要通过 API 调用原生功能，比如：获取当前定位信息、数据请求等功能，通过扩展module的方式来实现；component。

uniapp(安卓/苹果app端) - 最新详解本机号码一键登录功能，uniapp App平台端实现手机号一键登录功能，支持三网通移动、联通、电信手机号用户无需验证码直接登录（详细示例代码，一键复制）

最新发布

高级前端工程师

05-10

4216

uni-app，安卓app，苹果app，Android，ios，Uniapp手机软件app端，苹果ios系统手机号一键登入，uniapp app开发详解本机号码快捷登录，如何实现手机一键登录，一键登录失败怎么办，app手机号一键登录，手机号码一键登录，uniApp本机号码一键登录并获取手机号，无法获取手机号，苹果ios不能获取，本机一键登录详细教程，本机号码一键登录,一键登录/本机校验，最好用的插件，一键登录组件，uni-app中使用手机号一键登录，接入一键登录，联通电信移动三网通，阿里云，腾讯云，云函数，

参与评论您还未登录，请先登录后发表或查看评论

Android studio打包apk后提示“打包时未添加ui模块”

weixin_50606255的博客

11-01

3022

打包没问题，下载到手机上打开发现报如下弹框：网上找了很多方法，说的都是没有打包什么UI模块，但问题是我根本就没有在项目中用到这些模块，一步步回溯，回退，打包，发现是android打包的时候不能设置混淆在工程应用目录的gradle文件中设置minifyEnabled为false就行了。在此记录离线打包出现的问题。 ...

uniapp 使用map组件动态自定义标记点图标及内容文字

HHH917的博客

06-11

1万+

先看效果地图中的标记点可以动态变化自定义的图片与内容原理通过map组件中的 markers 属性设置标记点用于在地图上显示标记的位置 1、想要动态改变标记点图标必须把默认的标记点覆盖，用到了markers参数下的 iconPath设置标记点的图标，如果需求只需要简单的动态改变标记点的图标到这一步就结束了，但是如果需要动态改变标记点图标及内容(动态显示文字)就需要看下一步！ 2、把iconPath设置的图片改用一张1*1像素的透明背景图 png格式的。 3、markers 列表中的 custo

uniapp开发web端，接入app，使用plus，webview传递数据

kaminonya的博客

07-10

4626

也就是：子应用接入主应用，可以使用plus调用主应用的一些底层方法。plus.storage.getItem('cms_token') 是plus获取到主应用的缓存，获得到cms_token的值，通过这个访问接口，换取子应用自己的token，后续使用。App.vue是主组件，是资源的首加载项，入口文件，可以在里面定义项目的生命周期和globalData，处理基础的css文件和设置。pages是页面目录了，需要注意的是，页面想要访问，需要在pages.json中进行配置，有很多配置项，配置过后路径才能访问。

uniapp微信小程序实现地图展示控件

逆水行舟不进则退

11-30

3712

uniapp微信小程序实现地图上展示控件按钮

uniapp map-地图

y19910825的博客

07-22

778

uni-app

uniapp地图（map）功能研发

ds0604的博客

09-24

1667

一、底层依赖地图 1、h5和微信小程序基于腾讯地图 2、app、支付宝小程序基于高德地图 3、百度小程序、快应用基于百度地图备注：原生的map组件就是基于腾讯地图所以无需引用，其他地图是需要下载sdk文件以及申请key来支持应用的。二、基础写法 <template> <view> <map style="width: 100%; height: 700px;" :latitude="latitude" :longitude="longitude" :marker

uniapp（Android端）引入百度地图

m0_54850952的博客

03-09

2421

效果图 1.在util下建一个map.js export function mymap(ak) { return new Promise(function(resolve, reject) { window.init = function() { resolve(mymap) } var script = document.createElement('script') script.type = 'text/javascript' scri

技术合伙人必备攻略---app开发技术栈调研--多种方案对比--uniapp学习路线

直到世界的尽头

02-26

1813

app开发技术方案对比 app开发主要有几种技术方案如下：原生开发原生开发简介原生(native)开发从定义上来说一般是指用原生开发语言开发，原生开发语言就是开发整个系统时使用的编程语言。对于iOS来说就是Objective C，对于Android来说…不太好说，因为Android用的Linux内核是用C开发的，中间层的库是用C/C++开发的，但应用程序框架和应用程序都是用Java开发的。但实际上原生开发的含义有所扩展，主要区别于前端框架的跨端语言开发。目前做ios原生开发多使用Swift语言

uniapp官方提供的map组件使用问题

呆呆papa的博客

11-14

6031

1、地图SDK的选择博主在使用uniapp开发地图功能之前，使用过百度地图的SDK开发web地图功能。在最初的开发上希望能够使用百度地图的SDK，但是uniapp在接入地图功能时和web端开发还是有很大区别的，uniapp提供了一个地图组件<map>，因为产品只涉及到APP端，这里使用的是高德地图的SDK（这也是官方的推荐）注：在真机调试时，APP端的<map>组件使用的就是高德地图，配置其他的SDK会在打包后使用 2、不同页面文件选择使用uniapp进行APP开发时，可以选择

uniapp 踩坑Map组件

热门推荐

qq_42546652的博客

10-20

1万+

由于本人不爱看文档遇到问题先百度的原则，还是踩了不少坑。先简单记载第一步做出一个如图所示的效果代码如下： <map style="width: 100%; height:94vh;" :latitude="latitude" :longitude="longitude" :markers="marker" :scale='scale' :controls="controls" :circles="circles" :polyline="polyline"&

如何在uniapp中使用openlayers，mapbox等前端库

weixin_44265800的博客

10-31

6878

前言在进行uniapp开发时，很多时候我们需要在移动设备上进行地图开发，但是原生的地图插件功能太少，样式太丑，完全不够用。 renderjs renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。 renderjs的主要作用有2个：大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力在视图层操作dom，运行for web的js库平台差异说明引入openlayers 1）视图层，创建view节点 <template> <..

在uniapp 中如何引用天地图

weixin_35757531的博客

01-03

4256

在 uni-app 中使用天地图的方法如下：在 uni-app 项目的根目录下安装天地图的 npm 包，使用以下命令： npm install --save @supermap/iclient-unipage 在 uni-app 的页面中引入天地图的 npm 包，例如： import SuperMap from '@supermap/iclient-unipage' 在 uni-a...

uni-app app真机调试使用chooselocation时提示配置mapSearch插件，选择地址时页面白屏

weixin_46352326的博客

06-28

1025

1.app平台，新版的chooselocation api目前只支持高德地图，如果使用了百度地图需要切换为高德。3.如果appkey已经配置但是使用chooselocationAPI还是白屏需要检测Maps是否添加。配置完成以后需要重新制作app自定义基座并运行查看效果。2.检查app模块配置是否添加高德定位appkey。

Uniapp - 地图map组件及使用

Ainke

06-30

1万+

Uniapp是一个基于Vue.js开发的跨平台应用开发框架，通过一套代码，可以同时发布到多个平台，包括iOS、Android、Web等。它提供了丰富的组件库和开发工具，大大简化了移动应用开发的流程，极大地提高了开发效率。Uniapp提供了地图组件，可以方便地在应用中集成地图功能。该地图组件基于第三方地图服务商提供的API，支持常见的地图功能，如显示地图、添加标记点、添加覆盖物等。# 4.地图组件的基本用法本篇博客介绍了Uniapp地图组件的基本用法和一些高级用法。

uniapp使用vuex的modules模块，包括mapState, mapGetters, mapActions, mapMutations

qq_41444226的博客

04-20

3537

首先在uniapp官网已经内置了vuex，我们只要引用即可，uniapp-vuex说明 1、分别创建根路径下store文件夹，里面放置index.js,并在store文件夹里在创建一个modules文件夹，内部放置moduleB.js和user.js文件 index.js文件 import Vue from 'vue' import Vuex from 'vuex' // 导入模块 import user from '@/store/modules/user' import moduleB from.

uniapp-map基本使用

_小郑有点困了的博客

12-25

6228

页面元素： <map style="width: 100%; height: 100%" id="map1" ref="map1" :show-location="true" :latitude="map.latitude" :longitude="map.longitude" :scale="map.scale" :markers="map.covers" @markertap="markertap" ..

uniApp 地图使用

qq_37550440的博客

01-14

4827

uniApp 地图使用 1、[官网地址][https://uniapp.dcloud.io/component/map]，[插件市场地址][https://ext.dcloud.net.cn/] 2、地图分显示，和获取定位两部分；显示可选择腾讯地图、高德地图、百度地图 3、获取定位方法由 uniApp 提供，坐标为固定的 gcj02、即使设置类型 wgs84,也是得到 gcj02 坐标 <template> <map :controls="controls" :latit

uni-app使用高德天气api

04-07

1. 首先在高德开放平台上申请天气API的key。具体步骤可参考高德开放平台的官方文档。 2. 在uni-app项目中安装axios插件，用于发送http请求。 3. 在uni-app项目中创建一个api.js文件，用于封装调用高德天气API的逻辑。 4. 在api.js文件中编写以下代码： ``` import axios from 'axios'; const key = 'your_amap_weather_api_key'; // 替换为你的高德天气API key const apiUrl = 'https://restapi.amap.com/v3/weather/weatherInfo'; export function getWeatherInfo(city) { return axios.get(apiUrl, { params: { key, city, extensions: 'base', output: 'json' } }).then(res => { if (res.data.status === '1') { return res.data.lives[0]; } else { throw new Error(res.data.info); } }); } ``` 5. 在需要使用天气信息的页面中引入api.js文件，并调用getWeatherInfo方法获取天气信息。 ``` import { getWeatherInfo } from '@/api.js'; export default { data() { return { city: '北京', // 默认城市 weather: null // 天气信息 } }, methods: { getWeather() { getWeatherInfo(this.city).then(weather => { this.weather = weather; }).catch(error => { console.error(error); }); } }, mounted() { this.getWeather(); } }; ``` 6. 在页面中展示天气信息。 ``` <template> <div> <div>{{ city }}当前天气：{{ weather.weather }}，温度：{{ weather.temperature }}℃</div> </div> </template> ```