微信小程序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.rhkb.cn/news/479267.html

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

相关文章

【一篇搞定配置】网络分析工具WireShark的安装与入门使用

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;各种软件安装与配置_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1.…

Python基础学习-11函数参数

1、"值传递” 和“引用传递” 1&#xff09;不可变的参数通过“值传递”。比如整数、字符串等 2&#xff09;可变的参数通过“引用参数”。比如列表、字典。 3&#xff09;避免可变参数的修改 4&#xff09;内存模型简介 2、函数参数类型 1&#xff09; def func() #无参…

深入理解注意力机制(Attention Mechanism)

在深度学习中&#xff0c;“注意力机制&#xff08;Attention Mechanism&#xff09;”是近年来的一个重要突破。它最初被提出用于处理自然语言处理&#xff08;NLP&#xff09;任务&#xff0c;但如今已经广泛应用于计算机视觉、强化学习和其他领域。注意力机制赋予模型一种“…

linux-FTP服务器配置

FTP&#xff08;File Transfer Protocol&#xff0c;文件传输协议&#xff09; 一种用于在计算机网络中传输文件的标准协议。它允许用户通过客户端程序与远程服务器进行文件交换&#xff0c;支持文件的上传、下载、删除、重命名等操作。FTP服务常用于将网站文件上传到服务器&am…

蓝网科技临床浏览系统存在SQL注入漏洞

漏洞描述 蓝网科技临床浏览系统是一个专门用于医疗行业的软件系统&#xff0c;主要用于医生、护士和其他医疗专业人员在临床工作中进行信息浏览、查询和管理。在deleteStudy.php中的接口处存在SQL注入漏洞&#xff0c;未经身份验证的恶意攻击者利用 SQL 注入漏洞获取数据库中的…

QML学习 —— 32、自定义侧边滑动菜单(附源码)

效果 说明 侧滑菜单是应用中常见的从侧边划出菜单的效果。以滑动的方式从屏幕的左侧或右侧展开,为用户提供额外的导航选项或功能入口。侧边菜单的设计可以将应用的主要功能和内容以清晰的结构展示给用户,提升用户在使用应用时的便捷性和直观性。 代码 import QtQuick 2.12 i…

vue3项目部署在阿里云轻量应用服务器上

文章目录 概要整体部署流程技术细节小结 概要 vue3前端项目部署在阿里云轻量服务器 整体部署流程 首先有一个Vue3前端项目和阿里云应用服务器 确保环境准备 如果是新的服务器&#xff0c;在服务器内运行以下命令更新软件包 sudo apt update && sudo apt upgrade -y …

macos 14.0 Monoma 修改顶部菜单栏颜色

macos 14.0 设置暗色后顶部菜单栏还维持浅色&#xff0c;与整体不协调。 修改方式如下&#xff1a;

Redis设计与实现 学习笔记 第二十章 Lua脚本

Redis从2.6版本引入对Lua脚本的支持&#xff0c;通过在服务器中嵌入Lua环境&#xff0c;Redis客户端可以使用Lua脚本&#xff0c;直接在服务器端原子地执行多个Redis命令。 其中EVAL命令可以直接对输入的脚本进行求值&#xff1a; 而使用EVALSHA命令则可以根据脚本的SHA1校验…

关于相机选型的一些参数说明

上一篇&#xff1a;关于相机的一些参数计算&#xff08;靶面、视野等&#xff09; 目录 1.卷帘快门和全局快门1.1 卷帘快门1.2 全局快门PS&#xff1a;视觉伺服与快门选择 2.黑白和彩色3.CCD和CMOS3.1 CCD3.2 CMOSCCD VS CMOS 4.面阵和线扫4.1 面阵4.2 线扫4.3 面阵 VS 线扫 5.…

ubuntu设置程序开机自启动

文章目录 1、概述2、图形界面设置3、设置为Systemd服务 1、概述 测试环境&#xff1a;ubuntu22.04 带图形界面 实现方式1&#xff1a;通过图形界面的【启动应用程序】设置开机自启动&#xff1b; 实现方式2&#xff1a;通过配置为服务实现开机自启动。 2、图形界面设置 优点&am…

4.STM32之通信接口《精讲》之IIC通信---软件实现IIC《深入浅出》面试必备!

接下正式&#xff0c;进入软件编写IIC时序了&#xff0c;并实现对MPU6050的控制&#xff0c;既然是软件实现&#xff0c;那么硬件方面&#xff0c;我仅需两根控制线即可&#xff0c;即&#xff1a;数据控制线SDA&#xff0c;时钟控制线SCL。&#xff08;人为软件层面定义的&…

使用mingw+CMake在Windows平台编译OpenCV

1. 安装mingw和cmake cmake的安装比较简单&#xff0c;百度一下完成相关操作即可&#xff0c;笔者安装的是3.24.3版本。 Mingw的安装也有很多相关文章&#xff0c;不过我使用的是安装QT时附带安装的mingw&#xff0c;其路径为D:\software\Qt\Tools\mingw1120_64。其中的bin文件…

2024APMCM亚太杯数学建模C题【宠物行业】原创论文分享

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了2024 年APMCM亚太地区大学生数学建模竞赛C题的成品论文。 给大家看一下目录吧&#xff1a; 目录 摘 要&#xff1a; 10 一、问题重述 14 二&#xff0e;问题分析 15 2.1问题一 15 2.2问题二 15 2.3问题三…

win10中使用ffmpeg和MediaMTX 推流rtsp视频

在win10上测试下ffmpeg推流rtsp视频&#xff0c;需要同时用到流媒体服务器MediaMTX 。ffmpeg推流到流媒体服务器MediaMTX &#xff0c;其他客户端从流媒体服务器拉流。 步骤如下&#xff1a; 1 下载MediaMTX github: Release v1.9.3 bluenviron/mediamtx GitHub​​​​​…

海康面阵、线阵、读码器及3D相机接线说明

为帮助用户快速了解和配置海康系列设备的接线方式&#xff0c;本文将针对海康面阵相机、线阵相机、读码器和3D相机的主要接口及接线方法进行全面整理和说明。 一、海康面阵相机接线说明 海康面阵相机使用6-pin P7接口&#xff0c;其功能设计包括电源输入、光耦隔离信号输入输出…

vue3(十七)-基础入门之vue-nuxt路由

一、路由 Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 要在页面之间使用路由&#xff0c;建议使用 < nuxt-link> 标签。 <template><nuxt-link to"/">首页</nuxt-link> </template>1、基础路由 pages 的目录结…

C++设计模式-中介者模式

动机(Motivation) 多个对象相互关联的情况&#xff0c;对象之间常常会维持一种复杂的引用关系&#xff0c;如果遇到一些需求的更改&#xff0c;这种直接的引用关系将面临不断的变化。在这种情况下&#xff0c;可以使用一种”中介对象“来管理对象间的关联关系&#xff0c;避免…

IntelliJ+SpringBoot项目实战(十四)--在SpringBoot中整合SpringSecurity和JWT(上)

SpringSecurity是大名鼎鼎的认证授权框架&#xff0c;在SSH时代就已经大放异彩。在JAVA项目中&#xff0c;权限框架的解决方案主要是以SpringSecurity和Shiro为主。JWT是目前主流的基于access-token的的认证框架&#xff0c;在项目中一般时SpringSecurity和JWT结合使用&#xf…

【AI系统】Tensor Core 架构演进

自 Volta 架构时代起&#xff0c;英伟达的 GPU 架构已经明显地转向深度学习领域的优化和创新。2017 年&#xff0c;Volta 架构横空出世&#xff0c;其中引入的张量核心&#xff08;Tensor Core&#xff09;设计可谓划时代之作&#xff0c;这一设计专门针对深度学习计算进行了优…