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

一、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});}});},
});

四、点击编译查看效果

默认展示如下图所示

  

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

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

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

相关文章

Qt入门1——认识Qt的几个常用头文件和常用函数

1.头文件 ① #include <QPushButton>——“按钮”头文件&#xff1b; ② #include <QLabel>——“标签”头文件&#xff1b; ③ #include <QFont>——“字体”头文件&#xff1b; ④#include <QDebug>——输出相关信息&#xff1b; 2. 常用函数/类的基…

社交电商专业赋能高校教育与产业协同发展:定制开发AI智能名片及2+1链动商城小程序的创新驱动

摘要&#xff1a;本文围绕社交电商有望成为高校常态专业这一趋势展开深入探讨&#xff0c;剖析国家政策认可下其学科发展前景&#xff0c;着重阐述在专业建设进程中面临的师资短缺及实践教学难题。通过引入定制开发AI智能名片与21链动商城小程序&#xff0c;探究如何借助这些新…

CPU命名那些事

一、Intel CPU命名 1. 命名结构 Intel CPU 的命名通常包含以下几个部分&#xff1a; 品牌 产品线 系列 代数 具体型号 后缀 例如&#xff1a;Intel Core i7-13700K 2. 各部分含义 品牌 Intel&#xff1a;表示厂商&#xff08;几乎所有命名中都有&#xff09;。不同品…

AR智能眼镜|AR眼镜定制开发|工业AR眼镜方案

AR眼镜的设计与制造成本主要受到芯片、显示屏和光学方案的影响&#xff0c;因此选择合适的芯片至关重要。一款优秀的芯片平台能够有效提升设备性能&#xff0c;并解决多种技术挑战。例如&#xff0c;采用联发科八核2.0GHz处理器&#xff0c;结合12nm制程工艺&#xff0c;这种低…

第二十一周机器学习笔记:动手深度学习之——数据操作、数据预处理

第二十周周报 摘要Abstract一、动手深度学习1. 数据操作1.1 数据基本操作1.2 数据运算1.2.1 广播机制 1.3 索引和切片 2. 数据预处理 二、复习RNN与LSTM1. Recurrent Neural Network&#xff08;RNN&#xff0c;循环神经网络&#xff09;1.1 词汇vector的编码方式1.2 RNN的变形…

ThinkPad t61p 作SMB服务器,打印服务器,pc ,android ,ipad利用此服务器互传文件

1.在t61p上安装win7 2,配置好smb 服务 3.再安装好打印驱动程序 4.pc与win7利用系统的网络互相发现,映射为硬盘使用。 5.android&#xff0c;ipad安装ES文件浏览器访问win7 共享文件夹&#xff0c;互传文件。 6.android手机安装FE文件浏览器&#xff0c;可以利用花生壳外网…

【深度学习之二】正则化函数(weight decay, dropout, label smoothing, and etc)详解,以及不同的函数适用的场景

在深度学习中正则化函数的重要性不言而喻&#xff0c;今天主要总结一些当前常用的一些正则化函数 在深度学习中&#xff0c;正则化&#xff08;Regularization&#xff09;是一种防止模型过拟合的技术。过拟合指的是模型在训练数据上表现很好&#xff0c;但在未见过的测试数据…

神经网络(系统性学习二):单层神经网络(感知机)

此前篇章&#xff1a; 神经网络中常用的激活函数 神经网络&#xff08;系统性学习一&#xff09;&#xff1a;入门篇 单层神经网络&#xff08;又叫感知机&#xff09; 单层网络是最简单的全连接神经网络&#xff0c;它仅有输入层和输出层&#xff0c;没有隐藏层。即&#x…

Linux 手动升级软件保姆级教程,适用所有软件,不限于麒麟等国产系统

1、检查软件版本&#xff0c;及是否安装 openssh为例 是否安装 rpm -qa|grep openssh 备份 mv /etc/ssh/ /home/ssh-bakmv /usr/bin/ssh /usr/bin/ssh.bakmv /usr/sbin/sshd /usr/sbin/sshd.bakmv /etc/pam.d/sshd /etc/pam.d/sshd.old2、机器如果不在身边&#xff0c;机器…

【大数据学习 | Spark-Core】Spark的改变分区的算子

当分区由多变少时&#xff0c;不需要shuffle&#xff0c;也就是父RDD与子RDD之间是窄依赖。 当分区由少变多时&#xff0c;是需要shuffle的。 但极端情况下&#xff08;1000个分区变成1个分区)&#xff0c;这时如果将shuffle设置为false&#xff0c;父子RDD是窄依赖关系&…

java操作doc——java利用Aspose.Words操作Word文档并动态设置单元格合并

在实际工作中&#xff0c;如果业务线是管理类项目或者存在大量报表需要导出的业务时&#xff0c;可以借助第三方插件实现其对应功能。 尤其是需要对word文档的动态操作或者模板数据的定向合并&#xff0c;使用Aspose会相对来说容易一些&#xff0c;而且相关文档比较完整&#…

电商一件发货软件闲管家使用教程

闲鱼闲管家是一款专为闲鱼卖家设计的电脑版工作台&#xff0c;旨在帮助卖家更高效地管理其在闲鱼平台上的业务。以下是关于闲鱼闲管家的一些主要特点和功能&#xff1a; 主要特点&#xff1a; 多账号管理&#xff1a;支持同时管理多达30个闲鱼账号&#xff0c;方便大型卖家或…

Docker Seata分布式事务保护搭建 DB数据源版搭建 结合Nacos服务注册

介绍 Seata&#xff08;Simple Extensible Autonomous Transaction Architecture&#xff09;是一个开源的分布式事务解决方案&#xff0c;旨在为微服务架构中的分布式系统提供事务管理支持。Seata 通过提供全局事务管理&#xff0c;帮助开发者在分布式环境中保持数据一致性 …

HTB:WifineticTwo[WriteUP]

目录 连接至HTB服务器并启动靶机 信息搜集 使用rustscan对靶机TCP端口进行开放扫描 使用nmap对靶机开放端口进行脚本、服务扫描 使用curl访问靶机8080端口 使用浏览器直接访问/login路径 漏洞利用 使用searchsploit搜索该WebAPP漏洞 Payload USER_FLAG&#xff1a;bb…

【MySQL课程学习】:MySQL安装,MySQL如何登录和退出?MySQL的简单配置

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;MySQL课程学习 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 MySQL在Centos 7环境下的安装&#xff1a; 卸载…

oracle如何配置第二个监听优化数据传输

oracle如何配置第二个监听优化数据传输 服务器两个网卡&#xff0c;配置两个不同IP和端口的监听。 归档日志量每天很大&#xff0c;为了不影响业务&#xff0c;需要配置一个单独的万兆网络来专门的传输归档日志到DG库&#xff0c;这里就涉及到在19c中增加一个监听用来使用专门…

Feed流系统重构:架构篇

重构对我而言&#xff0c;最大的乐趣在于解决问题。我曾参与一个C#彩票算奖系统的重构&#xff0c;那时系统常因超时引发用户投诉。接手任务时&#xff0c;我既激动又紧张&#xff0c;连续两天几乎废寝忘食地编码。结果令人振奋&#xff0c;算奖时间从一小时大幅缩短至十分钟。…

【Linux驱动开发】驱动中的信号 异步通知开发

【Linux驱动开发】驱动中的信号 异步通知开发 文章目录 应用中的信号驱动中的信号应用程序接收驱动信号附录&#xff1a;嵌入式Linux驱动开发基本步骤开发环境驱动文件编译驱动安装驱动自动创建设备节点文件 驱动开发驱动设备号地址映射&#xff0c;虚拟内存和硬件内存地址字符…

单片机智能家居火灾环境安全检测-分享

目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 电路图采用Altium Designer进行设计&#xff1a; 三、实物设计图 四、程序源代码设计 五、获取资料内容 前言 传统的火灾报警系统大多依赖于简单的烟雾探测器或温度传感器&#xff0c;…

Java开发经验——系统日志问题

摘要 本文讨论了Java开发中的系统日志设置问题&#xff0c;特别是性能优化。文章分析了使用占位符记录slowString的耗时问题&#xff0c;并提出了使用lambda表达式和Log4j2 API来延迟参数内容获取&#xff0c;以解决性能问题。同时&#xff0c;文章还提到了SLF4J适配器的好处&…