微信小程序 map地图(轨迹)

allMarkers效果图

 

废话少说直接上马(最后是我遇到的问题)

cover-view是气泡弹窗,可以自定义弹窗,要配合js:customCallout,如果是非自定义的话:callout(可以修改颜色、边框宽度、圆角、边距等)有些属性我没加,还是看官方文档(虽然写的。。)

<!--index.wxml-->
<view class="page-section page-section-gap"><map id="myMap" style="width: 100%; height: 450px;" latitude="{{latitude}}" longitude="{{longitude}}" bindmarkertap="markertap" bindcallouttap="callouttap" bindlabeltap="labeltap" markers="{{markers}}" scale="16" polyline="{{polyline}}"><cover-view slot="callout"><block wx:for="{{customCalloutMarkerIds}}" wx:key="*this"><cover-view class="customCallout" marker-id="{{item}}"><!-- <cover-image class="icon" src="../img/point.png"></cover-image> --><cover-view class="content"><view style="background-color: #fff;"><view>设备名称</view><view>设备名称</view><view>设备名称</view></view></cover-view></cover-view></block></cover-view></map><button bindtap="addMarker" class="page-body-button" type="primary">添加marker</button>
</view>

字段说明:

allMarkers:模拟位置点

markers:地图显示位置点

polyline:地图点连线位置点

mapCtx:初始化地图

 customCallout:气泡自定义使用(建议使用方法)

callout:气泡简易使用

const normalCallout = {id: 1,latitude: 23.098994,longitude: 113.322520,iconPath: '../img/point.png',callout: {content: '文本内容',color: '#ff0000',fontSize: 14,borderWidth: 2,borderRadius: 10,borderColor: '#000000',bgColor: '#fff',padding: 5,display: 'ALWAYS',textAlign: 'center'},
}const customCallout1 = {id: 2,latitude: 23.097994,longitude: 113.323520,iconPath: '../img/point.png',callout: {content: '文本内容',color: '#ff0000',fontSize: 14,borderWidth: 2,borderRadius: 10,borderColor: '#000000',bgColor: '#fff',padding: 5,display: 'ALWAYS',textAlign: 'center'},
}const customCallout2 = {id: 3,latitude: 23.096994,longitude: 113.324520,iconPath: '../img/point.png',customCallout: {anchorY: 10,anchorX: 0,display: 'ALWAYS',},
}const customCallout3 = {id: 4,latitude: 23.095994,longitude: 113.325520,iconPath: '../img/point.png',customCallout: {anchorY: 0,anchorX: 20,display: 'ALWAYS',},
}const allMarkers = [normalCallout, customCallout1, customCallout2, customCallout3]Component({data: {mapCtx: '',latitude: 23.098994,longitude: 113.322520,customCalloutMarkerIds: '',markers: [],polyline: []},onReady: function (e) {// 使用 wx.createMapContext 获取 map 上下文this.mapCtx = wx.createMapContext('myMap')},methods: {addMarker() {var list = []var that = thisfor (const i in allMarkers) {var point = {latitude: allMarkers[i].latitude,longitude: allMarkers[i].longitude}list.push(point)}console.log(this.data.polyline.points)this.setData({polyline:[{points: list,color: '#58c16c',width: 6,borderColor: '#2f693c',borderWidth: 1,arrowLine: true}],markers: allMarkers,customCalloutMarkerIds: [2, 3, 4],})},},
})

xml和js直接复制就可以运行了没有其他配置

所遇到问题:

1.初始化时我在data直接给markers和polyline赋值了,导致不能显示气泡,解决是加了一个按钮等map初始化结束在添加点就正常了

2.marker-id必须是number

3.我没写,但是我感觉自定义气泡是可以加点击事件的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/30202.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java输出GB2312、GBK、GB18030、UTF-8所有的字符

相关文章 【转】彻底搞明白 GB2312、GBK 、GB18030和UTF-8 1.ASICII、GB2312、GBK、GB18030 以及 UTF8 的关系 2.编写代码 引入依赖&#xff1a;hutool工具类 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId>&…

轻松批量自定义重命名,为文件夹加上个性化编号!

在日常生活和工作中&#xff0c;我们经常需要对大量的文件夹进行重命名&#xff0c;以更好地管理和整理文件。然而&#xff0c;手动逐个修改文件夹名称费时费力&#xff0c;效率低下。现在&#xff0c;我们为您推荐一款简单易用的工具&#xff0c;可以帮助您快速批量自定义重命…

LoRaWAN网关与网络服务器(NS)的通信CUPS 协议介绍

LoRa Basics™ Station 定期查询 CUPS 服务器以获取更新。该协议是 HTTP/REST,使用Credentials中描述的客户端/服务器身份验证方法。对于每个查询,工作站都会提供有关其当前状态的信息,并接收包含其 LNS 和 CUPS 凭证更新的二进制 blob,以及具有任意更新的通用数据段。 通…

网络安全的相关知识点

网络安全威胁类型&#xff1a; 1.窃听&#xff1a;广播式网络系统。 2.假冒 3.重放&#xff1a;重复一份报文或者报文的一部分&#xff0c;以便产生一个被授权的效果。 4.流量分析 5.数据完整性破坏 6.拒绝服务 7.资源的非授权使用 8.陷门和特洛伊木马&#xff1a;木马病毒有客…

Java课题笔记~ Spring 的事务管理

一、Spring 的事务管理 事务原本是数据库中的概念&#xff0c;在 Dao 层。但一般情况下&#xff0c;需要将事务提升到业务层&#xff0c;即 Service 层。这样做是为了能够使用事务的特性来管理具体的业务。 在 Spring 中通常可以通过以下两种方式来实现对事务的管理&#xff…

花样滑冰选手骨骼点动作识别

2023 CCF BDCI 基于飞桨实现花样滑冰选手骨骼点动作识别 16名方案以及总结 比赛任务 花样滑冰与其他运动项目相比&#xff0c;其动作类型的区分难度更大&#xff0c;这对识别任务来说是极大的挑战。对于花样滑冰动作识别任务&#xff0c;主要难点如下&#xff1a; (1) 花样滑…

Python-OpenCV中的图像处理-图像梯度

Python-OpenCV中的图像处理-图像梯度 图像梯度Sobel 算子和 Scharr 算子Laplacian 算子 图像梯度 图像梯度&#xff0c;图像边界等使用到的函数有&#xff1a; cv2.Sobel()&#xff0c; cv2.Scharr()&#xff0c; cv2.Laplacian() 等原理&#xff1a;梯度简单来说就是求导。Op…

fastadmin、vue、react图标库适用于多种框架

在二开fastadmin中&#xff0c;在写vue以及react时&#xff0c;侧边导航栏以及按钮中常常需要很多图标&#xff0c;那么这些图标应该去哪里得到呢&#xff0c;在这里给大家一个链接&#xff0c;这里有丰富的图标库&#xff0c;可以找到自己想要的进行使用。 点击下方链接&…

github pages 用法详解 发布自己的网站

github pages 基础用法 URL 规则 假设你的 github 帐号为 mygithub&#xff0c;需要发布的仓库名为 myrepo&#xff0c;那么 pages 的 URL 为&#xff1a; https://mygithub.github.io/myrepo 添加内容 用任意编辑器写好&#xff08;或者生成&#xff09;标准的网页内容&a…

苹果正在测试新款Mac mini:搭载M3芯片 配备24GB大内存

据悉苹果目前正在测试新的Mac机型&#xff0c;亮点是采用最新的M3芯片。 据报道&#xff0c;首款搭载M3芯片的设备应该是13英寸的MacBook Pro和重新设计的MacBook Air&#xff0c;Mac mini机型并不在名单上。 M3和M2同样拥有最多8个核心&#xff0c;分别为4个性能核和4个能效核…

OpenAI-Translator 实战总结

最近在极客时间学习《AI 大模型应用开发实战营》&#xff0c;自己一边跟着学一边开发了一个进阶版本的 OpenAI-Translator&#xff0c;在这里简单记录下开发过程和心得体会&#xff0c;供有兴趣的同学参考 功能概览 通过openai的chat API&#xff0c;实现一个pdf翻译器实现一个…

Python爬虫——selenium的安装和基本使用

1.什么是selenium&#xff1f; selenium是一个用于web应用程序测试的工具selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样支持通过各种driver&#xff08;FrifoxDriver&#xff0c;ItenrentExploreDriver&#xff0c;OperaDriver&#xff0c;ChromeDrive…

【BASH】回顾与知识点梳理(十四)

【BASH】回顾与知识点梳理 十四 十四. 文件与目录的默认权限与隐藏权限14.1 文件预设权限&#xff1a;umaskumask 的利用与重要性&#xff1a;专题制作 14.2 文件隐藏属性chattr (配置文件案隐藏属性)lsattr (显示文件隐藏属性) 14.3 文件特殊权限&#xff1a; SUID, SGID, SBI…

了解华为(H3C)网络设备和OSI模型基本概念

目录 一&#xff0c;认识华为 1.华为发展史 2.华为网络设备介绍 3.VRP概述 二&#xff0c;OSI七层模型 1.七层模型详细表格 2.各层的作用 3.数据在各层之间的传递过程 4.OSI四层网络模型 一&#xff0c;认识华为 官网&#xff1a;https://www.huawei.com/cn/ 1.华为发…

从‘深林’到潮鞋App:得物如何改变电商格局”

在App Store上搜索下载得物App&#xff0c;惊奇发现其下载量达到百万级别&#xff0c;媲美同期京东App的下载量。 这是一个不小的数据体量&#xff0c;对此我产生了极大的好奇&#xff1a;“在淘宝系、京东、唯品会等电商巨头林立的现状下&#xff0c;单依靠潮鞋的得物凭什么能…

详解配置交换机多生成树MSTP+VRRP 的典型组网

详解配置交换机多生成树MSTPVRRP 的典型组网 组网&#xff1a; 1. 这是一个由三台交换机组成的倒三角型二层交换网络&#xff1b;网络中有4个VLAN&#xff1a;10、20、30、40&#xff1b;接口编号如图所示&#xff1b;SW3为接入层交换机&#xff0c;SW1、SW2为汇聚层交换机&am…

bash: make: command not found

make之后报错信息如下&#xff1a;cd 对应的文件路径后 make 发现报错&#xff1a;bash: make: command not found 这个原因可能是没有安装make工具,也可能是安装了make之后,没有将make的文件路径添加到系统环境变量中 有没有安装make,可以使用Search Everything搜索是否有make…

websocket+node实现直播(弱鸡版)

心血历程 这部分主要是写在写这些的时候遇到的问题以及换思路的过程&#xff0c;可以之间看正文 在之前我也写过直播功能&#xff0c;并且与websocket相结合实现了直播弹幕。只不过直播是使用的腾讯云的&#xff0c;而不是手写的直播推流拉流&#xff0c;这次又有一个新的项目…

【D3S】集成smart-doc并同步配置到Torna

目录 一、引言二、maven插件三、smart-doc.json配置四、smart-doc-maven-plugin相关命令五、推送文档到Torna六、通过Maven Profile简化构建 一、引言 D3S&#xff08;DDD with SpringBoot&#xff09;为本作者使用DDD过程中开发的框架&#xff0c;目前已可公开查看源码&#…

自从学了C++之后,小雅兰就有对象了!!!(类与对象)(中)——“C++”

各位CSDN的uu们好呀&#xff0c;好久没有更新小雅兰的C专栏啦&#xff0c;话不多说&#xff0c;让我们进入类和对象的世界吧&#xff01;&#xff01;&#xff01; 类的6个默认成员函数 构造函数 析构函数 拷贝构造函数 类的6个默认成员函数 如果一个类中什么成员都没有&am…