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

微信小程序2-地图显示和地图标记

news 来源：原创 2025/8/3 14:16:20

一、index修改页面，让页面能够显示地图和一个添加标记的按钮。

index.wxml

<scroll-view class="scrollarea" scroll-y type="list"><view class="index_container"><map id="map" style="width: 100%; height: 100%;" bindmarkertap="markertap" bindregionchange="regionchange" markers="{{markers}}"><button type="primary" bindtap="addMarker">添加</button></map></view>
</scroll-view>

        scrollarea和index_container都是容器，为了布局而用的。内容主要有两个元素map和button，

        其中我把button放在了map元素里面是为了实现，地图全屏，按钮在地图上的效果。

        map元素：

                style：设置元素占用空间，是相对于index_container容器的比例，因为index_container包含mapy元素。

                bindmarkertap：定义一个回调函数，当点击地图中某个标记点的时候触发该回调函数，可用于处理标记点的信息。

                regionchange：定义一个回调函数，当地图手动缩放的时候触发该回调函数，可用于处理地图视野变化的动作。

                markers：地图添加标记的数组，下文细说。

        button元素：

                bindtap：按钮的回调函数。

                还有按钮的大小、颜色、透明度等可以修改

                还可以写成<button class="format" type="primary" bindtap="addMarker">添加</button>

                format中定义按钮的样式，这种方法后面会细说。

二、修改index布局格式

index.wxss

page {height: 100vh;display: flex;flex-direction: column;
}
.scrollarea {flex: 1;overflow-y: hidden;flex-direction: column;align-items: center;justify-content: space-between;
}
.index_container {height: 100%;display: flex;flex-direction: column;align-items: left;margin-left: 0rpx;justify-content: space-between;padding: 0 0;box-sizing: border-box;
}

都是一些配置参数，通过名字即可了解意思，看不懂的百度搜索，基本都能搜到。

三、代码逻辑实现

Page({data: {        // 页面内全局变量，可通过this.data.markers使用，index.wxml中可通过{{markers}}使用markers: []},// 监听页面初次渲染完成onReady: function (e) {//this.requestLocationPermission()this.mapCtx = wx.createMapContext('map', this) // 创建地图上下文环境变量var that = this;// 获取设备当前中心定位this.mapCtx.getCenterLocation({success: function (res) {that.mapCtx.moveToLocation({ // 将地图中心移动至当前定位longitude: Number(res.longitude),latitude: Number(res.latitude),// longitude: Number(118.796000),// latitude: Number(32.058300),})}})},markertap: function (e) {// 处理点击标记点事件，可以在这里展示照片和文字信息},regionchange: function (e) {// 处理地图视野变化事件},addMarker: function () {// 添加标记点var that = this;this.mapCtx.getCenterLocation({success: function (res) {var markers = that.data.markers;console.log(res, markers);markers.push({iconPath: '/claw.png',  // 标记点图片，放在app.js同级目录下id: markers.length,latitude: res.latitude, // 标记点坐标longitude: res.longitude,title: '标记' + markers.length,width: 25,              // 标记点图片长、宽height: 25});that.setData({markers: markers});}});},
});

四、点击编译查看效果

默认展示如下图所示

  

点击“添加”按钮会在当前地图中心添加一个标记

相关文章：

微信小程序2-地图显示和地图标记

一、index修改页面&#xff0c;让页面能够显示地图和一个添加标记的按钮。 index.wxml <scroll-view class"scrollarea" scroll-y type"list"><view class"index_container"><map id"map" style"width: 100%; h…...

编程日记 2025/8/3 14:16:20

webpack配置和打包性能优化

文章目录 webpack基础配置loaderpluginloader 和 plugin 的区别devServer打包性能优化1、按需引入组件2、externals 属性3、给定文件匹配范围4、noParse 属性5、cacheDirectory 缓存属性6、happyPack 多个子进程并行 webpack基础配置 mode:development&#xff1a;设置webpack…...

编程日记 2025/8/3 1:25:56

iframe嵌入踩坑记录

iframe嵌入父子页面token问题 背景介绍 最近在做在平台A中嵌入平台B某个页面的需求&#xff0c;我负责的是平台B这边&#xff0c;使这个页面被嵌入后能正常使用。两个平台都实现了单点登录。 其实这是第二次做这个功能了&#xff0c;原本以为会很顺利&#xff0c;但没想到折腾…...

编程日记 2025/7/31 16:53:27

FreeRTOS——消息队列

目录 一、概念及其作用 1.1概念 1.2特点 1.3工作原理 二、相关API 2.1创建队列 2.2任务中写队列 2.3任务中读队列 2.4中断中写队列 2.5中断中读队列 三、实现原理 3.1消息队列控制块 3.2消息队列的创建 3.3消息的发送 3.3.1任务中发送 3.3.2中断中发送 3.4消息的…...

编程日记 2025/8/2 20:01:07

c++11的动态类型

c17引入了any 和 variant&#xff0c;可以将任意数据类型统一用any或variant类型表示&#xff0c;在开发中还是能够带来很多便利的。在c11版本中&#xff0c;可以用下面这个例子&#xff0c;仿照实现一个Any类型。 #include <iostream> #include <stdexcept> #inc…...

编程日记 2025/8/1 8:08:37

大语言模型---Llama模型文件介绍；文件组成

文章目录 1. 概要2. 文件组成 1. 概要 在使用 LLaMA&#xff08;Large Language Model Meta AI&#xff09;权重时&#xff0c;通常会涉及到与模型权重存储和加载相关的文件。这些文件通常是以二进制格式存储的&#xff0c;具有特定的结构来支持高效的模型操作。以下以Llama-7…...

编程日记 2025/7/31 7:52:00

常见网络厂商设备默认用户名/密码大全

常见网络厂商的默认用户名/密码 01 思科 (Cisco) 设备类型&#xff1a;路由器、交换机、防火墙、无线控制器 默认用户名&#xff1a;cisco 默认密码&#xff1a;cisco 设备类型&#xff1a;网管型交换机 默认用户名&#xff1a;admin 默认密码&#xff1a;admin 02 华…...

编程日记 2025/7/29 19:30:37

【大数据分析机器学习】分布式机器学习

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈智能大数据分析 ⌋ ⌋ ⌋ 智能大数据分析是指利用先进的技术和算法对大规模数据进行深入分析和挖掘&#xff0c;以提取有价值的信息和洞察。它结合了大数据技术、人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&a…...

编程日记 2025/7/31 22:28:25

Go 语言已立足主流，编程语言排行榜24 年 11 月

Go语言概述 Go语言&#xff0c;简称Golang&#xff0c;是由Google的Robert Griesemer、Rob Pike和Ken Thompson在2007年设计&#xff0c;并于2009年11月正式宣布推出的静态类型、编译型开源编程语言。Go语言以其提高编程效率、软件构建速度和运行时性能的设计目标&#xff0c;…...

编程日记 2025/8/2 13:44:15

数字反向输出

数字反向输出 C语言代码C 代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 小明听到广播里的数字后&#xff0c;总喜欢反着念给妈妈听。请聪明的你将小明听到的数字反向输出。 输入 输入为一个整型的四位数n 输出 …...

编程日记 2025/7/28 11:41:59

c++ std::stack总结

概念 std::stack 是 C 标准库中的一个容器适配器&#xff08;Container Adapter&#xff09;。它通常是基于其他容器&#xff08;如 std::deque 或 std::vector&#xff09;实现的&#xff0c;提供了一个后进先出&#xff08;LIFO&#xff0c;Last In First Out&#xff09;的…...

编程日记 2025/7/29 21:41:51

【C++习题】10.反转字符串中的单词 lll

题目&#xff1a; 链接&#x1f517;&#xff1a;557.反转字符串中的单词 lll 题目&#xff1a; 代码&#xff1a; class Solution { public:void Reverse(string &s, int start, int end){char tmp;while(start < end){tmp s[start];s[start] s[end];s[end] tmp;…...

编程日记 2025/8/3 11:21:03

【pyspark学习从入门到精通14】MLlib_1

目录 包的概览 加载和转换数据 在前文中&#xff0c;我们学习了如何为建模准备数据。在本文中&#xff0c;我们将实际使用这些知识&#xff0c;使用 PySpark 的 MLlib 包构建一个分类模型。 MLlib 代表机器学习库。尽管 MLlib 现在处于维护模式&#xff0c;即它不再积极开发…...

编程日记 2025/7/29 16:11:11

transformer.js（四）: 模型接口介绍

前面的文章底层架构及性能优化指南介绍了transformer.js的架构和优化策略&#xff0c;在本文中&#xff0c;将详细介绍 transformer.js 的模型接口&#xff0c;帮助你了解如何在 JavaScript 环境中使用这些强大的工具。 推荐阅读 ansformer.js&#xff08;二&#xff09;&…...

编程日记 2025/7/26 8:56:42

java集合练习题

简答题&#xff1a;分析HashSet和treeSet分别如何去重的&#xff1f; TreeSet的去重机制: 如果你传入了一个Comparator匿名对象&#xff0c;就使用实现的compare去重&#xff0c;如果方法返回0,就认为是相同的元素/数据&#xff0c;就不添加&#xff0c;如果你没有传入一个Comp…...

编程日记 2025/8/1 20:59:16

微知-plantuml常用语法和要点以及模板？（note over、create、box,endbox、alt,else,end, autonumber）

文章目录 常见语法常用 线条类实线虚线斜箭头或奇数箭头 A ->(10) B: B->(10) A分割线&#xff1a;newpage 颜色类给箭头指定颜色 -[#red]->给某个note加颜色&#xff1a; note over Alice, Bob #FFAAAA: xxx给分组信息着色 alt#red 分组类alt xxx; else xxx; else xx…...

编程日记 2025/8/1 17:22:22

gitHub常用操作

gitHub常用操作 1、把项目拉下来2、添加上游仓库3、进入分支4、从上游仓库拉取更新 1、把项目拉下来 在对应项目的右上角点击fork&#xff0c;fork下来&#xff1a;将远程仓库复制到个人仓库 在创建好的分支文件夹下使用 git clone自己远程仓库下的http地址&#xff08;fork…...

编程日记 2025/8/3 14:16:11

Mybatis Plus动态指定数据源

Java开发中一个项目连接多个数据源时&#xff0c;可能会有需要动态指定一个方法所使用的数据源的场景。例如不同的用户查询不同的数据源。 我遇到的需求是这样的&#xff1a;设计一个公共的数据字典组件&#xff0c;该组件需要连接数据源&#xff0c;使用方引入该组件后可以直…...

编程日记 2025/7/30 17:07:11

Python 爬虫 （1）基础 | 基础操作

一、基础操作 1、快速构建一个爬虫 ConvertCurl&#xff1a; https://curlconverter.com/选择URL&#xff0c;点击右键&#xff0c;选择 Copy >> Copy as cURL(bash) 安装JS环境&#xff1a;https://www.jb51.net/python/307069k7q.htm...

编程日记 2025/7/2 16:50:44

C++

目录 C 的发展总结&#xff1a;​编辑 1. C 的早期发展&#xff08;1979-1985&#xff09; 2. C 标准化过程&#xff08;1985-1998&#xff09; 3. C 标准演化&#xff08;2003-2011&#xff09; 4. C11&#xff08;2011年&#xff09; 5. C14&#xff08;2014年&#xf…...

编程日记 2025/7/29 23:53:42

Infineon（英飞凌） TLE985xQX 芯片电机工作电流、电压AD采样

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 单片机芯片合集 文章目录 其他系列文章导航 文章目录 前言 一、选取合适的端口 1.通过 OP1、OP2 电流采集运放输入端口进行H桥驱动的电流采集。 2.通过 O_D_VBAT_AD_EN、I_A_VBAT_A…...

编程日记 2025/7/31 7:07:07

三极管工作原理，以及小电流，如何驱动大电流

因为研究【自动下载电路实现】&#xff0c;涉及到三极管内容&#xff0c;之前看过&#xff0c;现在回看之前的笔记&#xff0c;一点印象都没了&#xff0c;于是&#xff0c;想了个办法&#xff0c;记住它 个人联想&#xff0c;不喜绕道&#xff0c;只是帮助个人记忆的 标题也是…...

编程日记 2025/7/27 12:47:05

Haystack 的开源开发 LLM 应用设计框架

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2025/7/30 20:37:49

彻底理解消息队列的作用及如何选择

一.为什么要使用消息队列&#xff1f; 使用消息队列&#xff0c;其实是需要根据实际业务场景来的&#xff0c;一般都是实际开发中&#xff0c;遇到了某种技术挑战&#xff0c;如果不使用MQ的话&#xff0c;业务实现起来比较麻烦&#xff0c;但是通过MQ就可以更快捷高效的实现业…...

编程日记 2025/7/31 22:06:23

【Java】二叉树：数据海洋中灯塔式结构探秘（上）

个人主页 &#x1f339;&#xff1a;喜欢做梦 二叉树中有一个树&#xff0c;我们可以猜到他和树有关&#xff0c;那我们先了解一下什么是树&#xff0c;在来了解一下二叉树 一&#x1f35d;、树型结构 1&#x1f368;.什么是树型结构&#xff1f; 树是一种非线性的数据结构&…...

编程日记 2025/8/1 16:56:56

海洋通信船舶组网工业4G路由器应用

船舶是浩瀚海洋中探索与贸易的载体&#xff0c;更是船员们生活与工作的家园。为了在广阔的水域中搭建起稳定、高效的网络桥梁&#xff0c;工业4G路由器以卓越的通信组网能力&#xff0c;为船舶组网提供网络支持。 工业4G路由器以其强大的信号发射能力&#xff0c;确保船舶内部…...

编程日记 2025/7/29 5:45:58

字符串-07-判断两个IP是否属于同一子网

文章目录 1. 题目描述2. 思路3. 代码 1. 题目描述 IP地址是由4个0-255之间的整数构成的&#xff0c;用"."符号相连。 二进制的IP地址格式有32位&#xff0c;例如&#xff1a;10000011&#xff0c;01101011&#xff0c;00000011&#xff0c;00011000&#xff1b;每八…...

编程日记 2025/8/1 4:52:29

Django启用国际化支持（2）—实现界面内切换语言：activate()

文章目录 ⭐注意⭐1. 配置项目全局设置&#xff1a;启用国际化2. 编写视图函数3. 配置路由4. 界面演示5、扩展自动识别并切换到当前语言设置语言并保存到Session设置语言并保存到 Cookie ⭐注意⭐ 以下操作依赖于 Django 项目的国际化支持。如果你不清楚如何启用国际化功能&am…...

编程日记 2025/8/2 15:22:45

自定义协议

1. 问题引入 问题&#xff1a;TCP是面向字节流的&#xff08;TCP不关心发送的数据是消息、文件还是其他任何类型的数据。它简单地将所有数据视为一个字节序列&#xff0c;即字节流。这意味着TCP不会对发送的数据进行任何特定的边界划分&#xff0c;它只是确保数据的顺序和完整…...

编程日记 2025/7/28 4:14:10

PHP Date 函数：日期和时间处理的全指南

PHP Date 函数：日期和时间处理的全指南 PHP Date 函数是 PHP 编程语言中用于处理日期和时间的核心函数之一。它提供了强大的功能，允许开发者轻松地格式化、计算和操作日期和时间值。本文将详细介绍 PHP Date 函数的用法，包括基本格式化、时间戳处理、时区设置以及一些高级特…...

编程日记 2025/7/30 5:13:32

C++设计模式：抽象工厂模式（风格切换案例）

抽象工厂模式&#xff08;Abstract Factory&#xff09;是一种创建型设计模式&#xff0c;其核心思想是&#xff1a;为一组相关或相互依赖的对象提供一个创建接口&#xff0c;而无需指定它们具体的类。简单来说&#xff0c;就是一个工厂可以生产一系列相关的对象。 我们接下来…...

编程日记 2025/8/2 0:40:03

社交媒体营销新趋势：如何通过海外平台提升品牌曝光度？

社交媒体不仅是简单的信息传播工具&#xff0c;更是连接用户与品牌之间的重要纽带。每天&#xff0c;有数以亿计的全球用户在不同平台上活跃&#xff0c;潜藏着巨大的市场潜力。对于企业来说&#xff0c;关键在于制定清晰的营销策略&#xff0c;精准把握不同社交平台的特性&…...

编程日记 2025/8/3 0:03:28

嵌入式C/C++编译常见问题与分析

#1 kcx.c:112:89: error: format specifies type unsigned int but the argument has type u32 * (aka unsigned int *) [-Werror,-Wformat] 报错原因&#xff1a; int kcx(u32 *trigger) { ERR_MSG("%s:failed. attr%d, trigger%u\n", __func__, attr_enable, trig…...

编程日记 2025/7/31 15:01:18

laravel 5.5 增加宏指令 joinSub, 省去-＞toSql() 和 addBinding($bindings)；

laravel 5.5 增加宏指令 joinSub, 省去->toSql() 和 addBinding($bindings); 1. 在laravel5使用join 子查询时 $sub_query DB::table(table1)->select([table1.id, cate_id])->join(table2, table1.id, , table2.id)->where(table1.cate_id, 2)->orderBy(tabl…...

编程日记 2025/7/30 13:13:59

知识库搭建：大健康产业数字化转型的新引擎

随着数字经济的蓬勃发展&#xff0c;大健康产业正步入一个崭新的发展篇章。消费者对于健康的追求日益增长&#xff0c;促使大健康企业积极探索数字化路径&#xff0c;以提升供应链效率、控制成本&#xff0c;并在激烈的市场竞争中脱颖而出。在此过程中&#xff0c;一系列数字化…...

编程日记 2025/8/2 17:05:50

创建可重用React组件的实用指南

尽管React是全球最受欢迎和使用最广泛的前端框架之一&#xff0c;但许多开发者在重构代码以提高可复用性时仍然感到困难。如果你发现自己在React应用中不断重复相同的代码片段&#xff0c;那你来对地方了。 在本教程中&#xff0c;将向你介绍三个最常见的特征&#xff0c;表明是…...

编程日记 2025/7/27 7:55:13

蓝桥杯每日真题 - 第18天

题目&#xff1a;&#xff08;出差&#xff09; 题目描述&#xff08;13届 C&C B组E题&#xff09; 解题思路&#xff1a; 问题分析 问题实质是一个带权图的最短路径问题&#xff0c;但路径的权重包含两个部分&#xff1a; 从当前城市到下一个城市的路程时间。 当前城市的…...

编程日记 2025/7/5 1:54:06

MySQL中索引全详解

第一部分&#xff1a;什么是索引 索引在数据库中就像书的目录&#xff0c;能够快速定位数据位置&#xff0c;从而提升查询效率。没有索引时&#xff0c;数据库查询需要从头到尾扫描整个表&#xff08;称为全表扫描&#xff09;&#xff0c;这在数据量大时非常耗时。有了索引后&…...

编程日记 2025/8/3 9:39:52

探索复合物TPP-PEG-Heparin的特性；磷酸三苯酯-聚乙二醇-肝素的线粒体靶向性

TPP-PEG-Heparin&#xff0c;即磷酸三苯酯&#xff08;TPP&#xff09;、聚乙二醇&#xff08;PEG&#xff09;和肝素&#xff08;Heparin&#xff09;的复合物&#xff0c;其特性融合了这三种成分的性质。 一、线粒体靶向性 TPP部分&#xff1a;具有线粒体靶向功能&#xf…...

编程日记 2025/8/2 18:16:44

ubuntu 配置 多个 git 客户端 账户

Git配置两个或多个账户 https://blog.csdn.net/mainking2003/article/details/134711865 git 提交 不用输入用户名、密码的方法&#xff08;GIT免密提交&#xff09; https://blog.csdn.net/wowocpp/article/details/125797263 git config 用法 https://blog.csdn.net/blueb…...

编程日记 2025/7/29 23:40:01

Web3与智能合约：区块链技术下的数字信任体系

随着互联网的不断发展&#xff0c;Web3代表着我们迈入了一个去中心化、更加安全和智能的网络时代。作为Web3的核心组成部分&#xff0c;区块链技术为智能合约的出现和发展提供了强有力的基础。智能合约不仅仅是自动化的代码&#xff0c;它们正逐步成为重塑数字世界信任体系的关…...

编程日记 2025/8/1 5:04:36

RocketMQ文件刷盘机制深度解析与Java模拟实现

引言 在现代分布式系统中&#xff0c;消息队列&#xff08;Message Queue, MQ&#xff09;作为一种重要的中间件&#xff0c;扮演着连接不同服务、实现异步通信和消息解耦的关键角色。Apache RocketMQ作为一款高性能的分布式消息中间件&#xff0c;广泛应用于实时数据流处理、…...

编程日记 2025/7/30 22:11:16

高级编程之结构化代码

背景&#xff1a;以下没结构化代码之前&#xff0c;定时器同步店铺信息的代码。 结构化的思想&#xff1a;SRP&#xff08;单一职责&#xff09;&#xff0c;一个方法是做一件事&#xff0c;层次是相关的&#xff0c;逻辑和数据操作进行拆分&#xff0c;数据操作从业务流程上定…...

编程日记 2025/8/1 8:55:46

学习编程，学习中间件，学习源码的思路

01 看的多&#xff0c;内化不足 最近想复习一下编程相关的知识&#xff0c;在复习前我翻开了之前的一些笔记&#xff0c;这些笔记基本都是从书本、视频、博客等摘取记录的&#xff0c;看着这些笔记心里总结&#xff1a;看的多&#xff0c;内化不足。 02 整理大纲 为了解决这个…...

编程日记 2025/7/31 18:27:56

网络安全与加密

1.Base64简单说明描述&#xff1a;Base64可以成为密码学的基石&#xff0c;非常重要。特点&#xff1a;可以将任意的二进制数据进行Base64编码结果&#xff1a;所有的数据都能被编码为并只用65个字符就能表示的文本文件。65字符&#xff1a;A~Z a~z 0~9 / 对文件进行base64编码…...

编程日记 2025/8/2 13:16:32

开源协议介绍

文章目录 1. MIT License2. Apache License 2.03. GNU General Public License (GPL)4. GNU Lesser General Public License (LGPL)5. BSD License6. Mozilla Public License (MPL)7. Creative Commons Licenses (CC)8. Unlicense选择建议 在 开源平台上&#xff0c;开源项目通…...

编程日记 2025/7/30 10:08:31

Java技术复习提升 10异常

10 异常 10.1异常介绍及分类 异常捕获 选中后alttabt->选中try-catch 异常就是程序执行中不正常的情况 注意语法和逻辑错误并不是异常 异常分类有两种 error和exception error是错误 虚拟机无法解决的严重问题 exception是其他因为编程错误或者外在因素导致的一般性的问…...

编程日记 2025/7/31 13:52:43

java版工程项目管理系统源码：Spring Cloud与前后端分离的完美结合

在现代化的工程项目管理中&#xff0c;一套功能全面、操作便捷的系统至关重要。本文将介绍一个基于Spring Cloud和Spring Boot技术的Java版工程项目管理系统&#xff0c;结合Vue和ElementUI实现前后端分离。该系统涵盖了项目管理、合同管理、预警管理、竣工管理、质量管理等多个…...

编程日记 2025/7/31 2:04:12

Oracle与MySQL中CONCAT()函数的使用差异

一、CONCAT函数介绍 CONCAT函数是MySQL等数据库中用于连接两个或多个字符串的内置函数。其基本语法如下&#xff1a; CONCAT(string1, string2, ...)参数说明&#xff1a; string1, string2, …&#xff1a;需要连接的字符串参数&#xff0c;可以有多个。 返回值&#xff1…...

编程日记 2025/7/30 9:28:26

AI社媒引流工具：解锁智能化营销的新未来

在数字化浪潮的推动下&#xff0c;社交媒体成为品牌营销的主战场。然而&#xff0c;面对海量的用户数据和日益复杂的运营需求&#xff0c;传统营销方法显得力不从心。AI社媒引流王应运而生&#xff0c;帮助企业在多平台中精准触达目标用户&#xff0c;提升营销效率和效果。 1.…...

编程日记 2025/7/31 23:56:36