uniapp使用地图开发app

devtools/2024/9/20 13:42:15/ 标签: uni-app, javascript, 前端

使用uniapp开发app中使用到地图的坑:

1、简单使用地图的功能比较简单,仅使用到地图选点和定位功能:(其中问题集中在uni.chooseLocation中)下面是api官网地址

uni.getLocation(OBJECT) | uni-app官网 

官方建议app端使用高德地图,实际是只能使用高德地图。不怕坑多的可以尝试一下谷歌地图。腾讯地图是肯定不支持的。

2、第二种情况是需要用到地图的markers(点标记)、 polygon(多边形)、polyline(数组第一项连线至最后一项)仅使用这些简单且单一展示,无复杂交互可以使用地图<map>组件。

由于map组件的在打包时会打包成原生app的组件,层级会高于其他UI组件,无论如何提高z-index层级都无法覆盖。官方提供了两个组件可以覆盖(cover-view和cover-image),可以压住地图标签,使用方法:

cover-view\cover-image必须写在地图标签内部,如下图2。注意:(如果有动画效果、渐变效果、其他复杂交互,这种方式无法实现。实现出来的效果是非常卡顿的,在此就不展示了)

图2: 

javascript"><map class="map-container" :latitude="latitude" :longitude="longitude":markers="covers"><cover-view>可以覆盖在地图上方</cover-view>
</map> 

3:、第三种情况就是app中有地图,且有其他交互效果,动画效果等,最好的方式是使用H5实现地图,这样就不会被地图层级压住,web端能实现的动画效果、渐变均可以比较容易实现。(不受限于高德地图,其他地图也是可以使用的)

针对第三种情况实现地图的方法如下:

方法一:新项目的话可以考虑使用webpack或者vue-cli,vue版本无所谓(打包工具不能是vite),直接写H5,打包好的dist文件夹然后再放到hbuider新建的项目中打包成app。(简单粗暴)

方法二: 现有老项目是uni的,已经无法调整,可以考虑使用web-view和renderjs的方式。

web-view其实是外部项目提供H5,和方法一方式相似。

renderjs的方式比较另类,能完成项目,待后续。。。


http://www.ppmy.cn/devtools/19336.html

相关文章

centos 安装配置文件中心 nacos2.2.3 稳定版

安装mysql 8 参考文章 centos7搭建mysql5.6 && mysql 8.0_centos7 mysql5.6-CSDN博客 安装 jdk 17 官网下载 对应的版本 Java Downloads | Oracle wget https://download.java.net/java/GA/jdk17.0.2/dfd4a8d0985749f896bed50d7138ee7f/8/GPL/openjdk-17.0.2_l…

OSPF域间路由

注&#xff1a;区域&#xff08;area&#xff09;是以接口进行划分的 描述&#xff1a; R1的g0/0/1接口属于area 0 √ R1属于区域0和区域1 1.设计原则 1、OSPF区域的设计原则&#xff1a; 骨干区域有且只能存在一个 非骨干区域必须和骨干区域相连 多区域时&#…

Golang基础1-基本类型、if、switch、string

基本类型 bool 整数&#xff1a;byte(相当于uint8), rune(相当于int32), int/uint ,int8/uint8 ,int16/uint16 ,int32/uint32 ,int64/uint64 浮点数: float32 ,float64, complex64 ,complex128 array&#xff08;值类型&#xff09;、slice、map、chan&#xff08;引用类型…

线上社交app的搭建,圈子社交系统,小程序+app+H5三端,源码交付,支持二开!

在科技飞速发展的大背景下&#xff0c;年轻人社交不再局限于面对面&#xff0c;线上社交app已深入各大年轻人的手机中。相比于传统交友方式&#xff0c;线上社交app为用户提供了更加新奇的交友体验。同时&#xff0c;它还可以吸引更多的朋友&#xff0c;提高用户的整体交友体验…

c++ 智能指针 简单实现

1.需要设计 智能指针实现&#xff0c;目标用一个对象管理指针。 指针类:B 智能指针类A<T> A<B> a(new B); 用A来管理B的指针&#xff0c;如果有多个指针指向一个对象&#xff0c;那么都用A来承载这个指针 A<B> b(a); 这里需要一个拷贝构造函数&#xff0c;为…

嵌入式物联网实战开发笔记-乐鑫ESP32芯片功能对比以及功能选型【doc.yotill.com】

乐鑫ESP32入门到精通项目开发参考百例下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1ATvRnAZvxkev-PJfd3EAPg?pwd4e33 提取码&#xff1a;4e33 2.1 初识 ESP32 ESP32-S3 是一款低功耗的 MCU 系统级芯片 (SoC)&#xff0c;支持 2.4 GHz Wi-Fi 和低功耗蓝牙 (…

并并并并·病查坤

P1、什么是并查集 引用自百度百科&#xff1a; 并查集&#xff0c;在一些有N个元素的集合应用问题中&#xff0c;我们通常是在开始时让每个元素构成一个单元素的集合&#xff0c;然后按一定顺序将属于同一组的元素所在的集合合并&#xff0c;其间要反复查找一个元素在哪个集合…

go中标签创建与引用

go中tag维护方法 util项目&#xff1a; 0 util修改的代码提交 1 从gitlab上获取最新的tag https://git.****.com/peiyou_like_shuangshi_zhongtai/beibo_utils/tags 2 创建tag: git tag -a v1.101.11 -m "its的ggb查询" 3 tagpush&#xff1a;git push origin v1.10…

玄子Share-Shell编程之条件语句

玄子Share-Shell编程之条件语句 条件测试操作 test命令 测试表达式是否成立&#xff0c;若成立返回0&#xff0c;否则返回其他数值 格式1&#xff1a;test 条件表达式 格式2&#xff1a;[ 条件表达式 ] # 至少应有一个空格文件测试 [ 操作符 文件或目录 ][rootlocal…

状态模式:管理状态转换的策略

在软件设计中&#xff0c;某些对象在其生命周期内会有不同的状态&#xff0c;并且这些状态之间可以相互转换。状态模式&#xff08;State Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许一个对象在其内部状态改变时改变其行为。这个模式将各种状态转移逻辑封装在独…

村庄集中式生活废水处理设备技术工艺

诸城市鑫淼环保小编带大家了解一下村庄集中式生活废水处理设备技术工艺 工艺&#xff1a; 生物接触氧化法指由浸没在污水中的填料和曝气系统构成的污水处理方法&#xff0c;在有氧条件下&#xff0c;污水与填料表面的生物膜广泛接触&#xff0c;使污水得到净化。填料指在污水处…

ollama集成open-webui本地部署大模型应用

文章目录 概述安装ollama运行指定模型命令帮助docker 安装 webuiWebUI与ollama在同一台机器WebUI与ollama不在同一台机器(推荐)更新open-webui离线安装open-webui使用验证访问导入模型文件参考资料概述 ollama是一款在本地启动并运行大型语言模型的工具,主要功能是在 Docke…

c++ opencv

文章目录 错误1. C2039 "channels": 不是 "cv::DataType<_Tp>" 的成员2. 注意cv::mat的类型3. cv::mat求inv4. vector subscript out of range5. 使用determinant求行列式注意点 其他1.Vec3b的赋值与访问2. cv::mean3. 将cv::mat三通道改为单通道且保…

第二章:计算机系统基础知识之计算机网络

计算机网络 计算机网络是利用通信线路将地理上分散的、具有独立功能的计算机系统和通信设备按不同的形式连接起来&#xff0c;并依靠网络软件及通信协议实现资源共享和信息传递的系统。   计算机网络技术主要涵盖通信技术、网络技术、组网技术和网络工程等四个方面。 计算机…

安装 wsl-ubuntu 24.04

安装 wsl-ubuntu 24.04 1. 安装 Ubuntu-24.042. (可选)配置阿里云软件源3. 系统更新 1. 安装 Ubuntu-24.04 安装 Ubuntu-24.04&#xff0c;默认会安装在 C 盘&#xff0c; wsl --install -d Ubuntu-24.04导出 Ubuntu-24.04&#xff0c; wsl --export Ubuntu-24.04 D:\tmp\Ub…

Mac如何更换终端默认的python版本

一、Mac中如何更换终端默认的python版本 1、打开终端输入下列代码&#xff0c;打开配置文件 open ~/.bash_profile 2.在打开的配置文件中输入&#xff08;以下代码3.12替换为所下载的版本即可&#xff09; #下面是修改python版本的命令就是环境变量 export PYTHON_HOME/Lib…

深拷贝与浅拷贝-附深拷贝工具类

深拷贝与浅拷贝的区别 浅拷贝只是拷贝了源对象的地址&#xff0c;所以当源对象发生改变时&#xff0c;拷贝的对象的值也会对应发生改变。 深拷贝则是拷贝了源对象的所有值&#xff0c;而不是地址&#xff0c;所以深拷贝对象中的值不会随着源对象中的值的改变而改变。 浅拷贝只是…

【java毕业设计】 基于Spring Boot+mysql的高校心理教育辅导系统设计与实现(程序源码)-高校心理教育辅导系统

基于Spring Bootmysql的高校心理教育辅导系统设计与实现&#xff08;程序源码毕业论文&#xff09; 大家好&#xff0c;今天给大家介绍基于Spring Bootmysql的高校心理教育辅导系统设计与实现&#xff0c;本论文只截取部分文章重点&#xff0c;文章末尾附有本毕业设计完整源码及…

pnpm 安装后 node_modules 是什么结构?为什么 webpack 不识别 pnpm 安装的包?

本篇研究&#xff1a;使用 pnpm 安装依赖时&#xff0c;node_modules 下是什么结构 回顾 npm3 之前&#xff1a;依赖树 缺点&#xff1a; frequently packages were creating too deep dependency trees, which caused long directory paths issue on Windowspackages were c…

【机器学习】农田智能监控系统的实践探索

机器学习赋能现代农业&#xff1a;农田智能监控系统的实践探索 一、机器学习在现代农业中的重要作用二、机器学习在农田智能监控系统中的应用三、农田智能监控系统的实践意义 在科技飞速发展的今天&#xff0c;机器学习技术正以其强大的数据处理和模式识别能力&#xff0c;逐步…