当前位置: 首页 > news >正文

uniapp地图基本使用及解决添加markers不生效问题?

uniapp地图使用

App端 通过 nvue 页面实现地图

文章目录

    • uniapp地图使用
      • 效果图
      • template
      • js
        • 添加 marker
        • 使用地图查看位置
        • 移到到当前位置

效果图

在这里插入图片描述


template

<template><view class="mapWrap"><!-- #ifdef APP-NVUE --><map class="map-container" id="map" :longitude="location.lng" :latitude="location.lat" :show-location="true" :enable-3D="enable3D" :markers="markers" :include-points="includePoints" @callouttap="oncallouttap"></map><!-- 定位当前位置 --><cover-view class="myLocation fcc"><cover-image class="img" src="@/static/image/icon/currnet_location.png" @click="moveToMyLocation"></cover-image></cover-view><!-- #endif --></view>
</template>

js

添加 marker
使用地图查看位置
移到到当前位置
<script>export default {data() {return {location: {lng: 114.058279,lat: 22.505375},markers: [],includePoints: []}},onLoad() {let tmpLocation = this.$store.state.location;if (tmpLocation.lng) {this.location = tmpLocation;}},onReady() {this.map = uni.createMapContext("map", this);},methods: {getData() {// ....// 测试数据this.dataList = [{name: "长安街",location: {lat: 39.907145,lng: 116.396651}},{name: "天安门",location: {lat: 39.908823,lng: 116.39747}}]// 添加 markerthis.addMarkers();},/*** 添加marker*/addMarkers() {let markerList = [];this.batteryList.forEach((item, index) => {let location = item.location;if (location) {// 直接使用 this.markers.push()方式,无法添加 markermarkerList.push({id: Number(index + 1),latitude: Number(location.lat),longitude: Number(location.lng),title: item.name,zIndex: '1',rotate: 0,width: 30,height: 30,anchor: {x: 0.5,y: 1},callout: {content: item.name,color: '#fff',fontSize: 10,borderRadius: 4,borderWidth: 1,borderColor: '#fb6620',bgColor: '#f7b733',padding: '5',display: 'ALWAYS'},iconPath: '/static/image/icon/location01.png'})}this.markers = markerList;})},/*** 气泡事件*/oncallouttap(e) {const { markerId } = e.detail;const marker = this.markers.find((item) => item.id === markerId);// 使用地图查看位置uni.openLocation({latitude: marker.latitude,longitude: marker.longitude,name: marker.title,success: (res) => {console.log('success');}});},/*** 移到到当前位置*/moveToMyLocation() {let latitude = this.location.lat;let longitude = this.location.lng;this.map.moveToLocation({latitude,longitude,success: (res) => {this.includePoints = [{latitude,longitude}];}});}}}
</script>

相关文章:

uniapp地图基本使用及解决添加markers不生效问题?

uniapp地图使用 App端 通过 nvue 页面实现地图 文章目录 uniapp地图使用效果图templatejs添加 marker使用地图查看位置移到到当前位置 效果图 template <template><view class"mapWrap"><!-- #ifdef APP-NVUE --><map class"map-containe…...

使用系统ProgressBar实现三色进度条

使用系统ProgressBar实现如图三色进度条&#xff1a; //布局中<ProgressBarandroid:layout_width"0dp"android:layout_height"8dp"android:layout_marginLeft"16dp"app:layout_constraintBottom_toBottomOf"id/photo"app:layout_c…...

Vue3中的组合式API的详细教程和介绍

文章目录 前言介绍组合式 API 基础setup 组件选项 带 ref 的响应式变量生命周期钩子注册内部 setupwatch 响应式更改独立的 computed 属性后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;vue.js &#x1f431;‍&#x1f453;博主在前端…...

Java后端开发——JDBC(万字详解)

Java后端开发——JDBC&#xff08;万字详解&#xff09; 今日目标 掌握JDBC的的CRUD理解JDBC中各个对象的作用掌握Druid的使用 1&#xff0c;JDBC概述 在开发中我们使用的是java语言&#xff0c;那么势必要通过java语言操作数据库中的数据。这就是接下来要学习的JDBC。 1.1 …...

python etree.HTML 以及xpath 解析网页的工具

文章目录 导入模块相关语法实战 导入模块 from lxml import etree相关语法 XPath&#xff08;XML Path Language&#xff09;是一种用于在XML文档中定位和选择元素的语言。XPath的主要应用领域是在XML文档中进行导航和查询&#xff0c;通常用于在XML中选择节点或节点集合。以…...

电机伺服驱动学习笔记(7)待编辑

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤1.引入库2.读入数据 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;…...

【云备份】业务处理

文章目录 1. 业务处理作用功能 2. 代码框架编写构造函数UpLoad ——文件上传请求ListShow —— 展示页面请求处理实现Download —— 下载请求的处理实现断点续传实现 1. 业务处理 作用 业务处理模块是对客户端的业务请求进行处理 功能 1.文件上传请求&#xff1a;备份客户端…...

JVM GC算法

一, 垃圾回收分类: 按线程数分&#xff0c;可以分为串行垃圾回收器和并行垃圾回收器。 按工作模式分&#xff0c;可以分为并发垃圾回收器和独占式垃圾回收器 按碎片处理方式分&#xff0c;可以分为压缩式垃圾回收器和非压缩式垃圾回收器按工作的内存区间分&#xff0c;又可分为…...

对Spring框架的一些总结

对Spring框架的一些总结 在文章开头我真心推荐大家一个优秀的编程老师&#xff1a;孙帅老师(孙哥suns)&#xff0c;孙帅老师在哔哩哔哩的Spring5教学视频时长接近33个小时&#xff0c;从0基础到一步一步手把手的教你抽丝剥茧分析Spring框架的所有知识&#xff0c;孙帅老师的教…...

C# WPF上位机开发(第一个应用)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 万事开头难&#xff0c;很多事情都是难在第一步。走出了这第一步&#xff0c;回过头看以前走的每一步&#xff0c;发现其实也不难。用c# wpf编写界…...

有点迷糊class和初始化参数的用法了

翻阅手册https://www.runoob.com/python3/python3-class.html Python从设计之初就已经是一门面向对象的语言&#xff0c;正因为如此&#xff0c;在Python中创建一个类和对象是很容易的。本章节我们将详细介绍Python的面向对象编程。 如果你以前没有接触过面向对象的编程语言&…...

如何选择一款安全稳定的跨境浏览器?

选择适合自己的跨境浏览器是进行跨境电商和跨境交流的关键一步。本文将为您介绍如何客观地选择一款安全稳定的跨境浏览器&#xff0c;以便更好地进行跨境业务。 在选择跨境浏览器时&#xff0c;以下几个因素是需要考虑的&#xff1a; 网络速度&#xff1a;跨境业务需要稳定而高…...

SQL Server 数据库,使用函数查询统计信息

4.1 在查询中使用函数 在前面章节已经学习了一些简单的增、删、改、查询的T-SOL.语句&#xff0c;但是为了更方便快捷地完 成大量的任务&#xff0c;SOLServer提供了一些内部函数&#xff0c;可以和SOLServer的SELECT语句联合使用&#xff0c;也可 以与UPDATE和INSERT一起使用&…...

mysql区分大小写吗

mysql在windows下默认是不区分大小写的&#xff0c;在linux下默认是区分大小写的。 所以&#xff0c;为了避免出问题&#xff0c;许多公司的数据库编程规范中明确规定&#xff1a;库名、表名、列名、索引名一律小写&#xff0c;不同单词之间以下划线分割&#xff0c;且控制在3…...

HarmonyOS 开发案例分享:万能卡片也能用来玩游戏

一、前言 作为一名开发爱好者&#xff0c;从大了讲&#xff0c;我学习并进行 HarmonyOS 相关开发是为了能为鸿蒙生态建设尽一份绵薄之力&#xff0c;从小了讲&#xff0c;就是为了自己的兴趣。而万能卡片是一个让我非常感兴趣的东西。 很多时候我跟别人解释什么是万能卡片&…...

Could NOT find resource [logback-test.xml]

修改 之后就可以正常启动了...

11.28 C++作业

提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 要求使用C风格字符串完成 #include <iostream>using namespace std;int main() {string str;cout << "请输入一个字符串&#xff1a;" <<…...

126. 单词接龙 II

126. 单词接龙 II 需要注意的是&#xff0c;由于要找最短路径&#xff0c;连接 dot 与 lot 之间的边就不可以被记录下来&#xff0c;同理连接 dog 与 log 之间的边也不可以被记录。这是因为经过它们的边一定不会是最短路径。因此在广度优先遍历的时候&#xff0c;需要记录的图…...

SpringBoot+SSM项目实战 苍穹外卖(2)

继续上一节的内容&#xff0c;本节完成新增员工、员工分页查询、启用禁用员工账号、编辑员工、导入分类模块功能代码。 目录 新增员工(完整流程分为以下五个部分)需求分析和设计代码开发功能测试代码完善 (ThreadLocal 线程局部变量)代码提交 员工分页查询代码完善 扩展Spring …...

vue常见优化手段

永远不要过早优化 why&#xff1f;过早优化的代价就是开发时间变长&#xff0c;开发成本增加&#xff0c;它会慢慢的让我们的代码变得不可阅读&#xff0c;难以维护&#xff1b;这些都是优化带来的代价。有句话是这样说的&#xff1a;命运馈赠的礼物&#xff0c;早已在暗中标好…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...