微信小程序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. 常用函数/类的基…

【vue3+Typescript】unapp+stompsj模式下替代plus-websocket的封装模块

由于plus-websocket实测存在消息丢失的问题&#xff0c;只能寻找替代的方案&#xff0c;看文章说使用原生的即可很好的工作。而目前在stompjs里需要使用websocket类型的封装模块&#xff0c;看了下原来提供的接口&#xff0c;采用uniapp原生的websocket模式&#xff0c;对原模块…

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

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

Linux进阶:环境变量

环境变量是一组信息记录&#xff0c;类型是KeyValue型&#xff08;名值&#xff09;&#xff0c;用于操作系统运行的时候记录关键信息. env命令&#xff1a;查看系统全部的环境变量 语法&#xff1a;env $符号&#xff1a;取出指定的环境变量的值 语法&#xff1a;$变量名 …

CPU命名那些事

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

英语写作中“联系、关联”associate correlate 及associated的用法

似乎是同义词的associate correlate 实际上意思差别明显&#xff0c;associate 是人们把两者联系在一起&#xff08;主观联系&#xff09;&#xff0c;而correlate 指客观联系。 例如&#xff1a; We always associate sports with health.&#xff08;我们总是将运动和健康联…

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

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

Unity 设计模式-单例模式(Singleton)详解

设计模式 设计模式 是指在软件开发中为解决常见问题而总结出的一套 可复用的解决方案。这些模式是经过长期实践证明有效的 编程经验总结&#xff0c;并可以在不同的项目中复用。设计模式并不是代码片段&#xff0c;而是对常见问题的 抽象解决方案&#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是窄依赖关系&…

Go语言开发的源代码行数统计工具

目录 功能特点未来开发计划安装使用方法示例命令通用命令参数选项 示例分析特定目录仅包含特定语言排除特定扩展名的文件生成 JSON 格式的输出显示支持的语言 仓库地址 gcloc 是一个开源工具&#xff0c;用于统计各种编程语言的源代码文件数量和代码行数。它支持多种语言&…

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…

CSS浮动:概念、特性与应用

CSS浮动是网页设计和开发中常见的布局技术之一&#xff0c;以下是CSS浮动相关的所有重要知识点&#xff1a; 一、浮动的定义与语法 浮动&#xff08;float&#xff09;属性可以指定一个元素应沿其容器的左侧或右侧放置&#xff0c;允许文本和内联元素环绕它。浮动属性最初只用…