首页 > 编程语言 >小程序,uniapp中map的使用

小程序,uniapp中map的使用

时间:2024-08-09 11:52:07浏览次数:12  
标签:uniapp nvue map 微信 App 程序 Number 2.1

2天撸了一个地图标记的小程序,感谢uniapp, unicloud让开发如此高效。

主要功能是在map组件上做标记,用户点击标记可以看标记的详情,很简单,单一的小程序

了解map组件的基本使用,在地图上创造无线可能(吹牛)

各位可以看下效果. 

直接上代码

1. template声明map组件

<map 
:markers="poiList"
@markertap="markertap"
:scale=10
:latitude="latitude"
:longitude="longitude"
style="width: 100%;" :style="{height: windowHeight+'px'}"></map>

属性说明:

markers: 是标记点的数据,数据类型为数组,详细见下图。id, latitude,longitude, width,height,iconPath,title这几个属性是必须有值的。虽然uniapp官方文档上有的写非必填,但是不填会报错的

属性说明类型必填备注平台差异说明
id标记点idNumbermarker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。最大限制9位数
latitude纬度Number浮点数,范围 -90 ~ 90
longitude经度Number浮点数,范围 -180 ~ 180
title标注点名String点击时显示,callout存在时将被忽略App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序
iconPath显示的图标String项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径
rotate旋转角度Number顺时针旋转的角度,范围 0 ~ 360,默认为 0App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序
alpha标注的透明度Number默认1,无透明,范围 0 ~ 1App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序
width标注图标宽度Number默认为图片实际宽度App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序
height标注图标高度Number默认为图片实际高度App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序
callout自定义标记点上方的气泡窗口Object支持的属性见下表,可识别换行符。App-nvue 2.1.5+、H5、微信小程序、支付宝小程序、百度小程序、京东小程序
label为标记点旁边增加标签Object支持的属性见下表,可识别换行符。App-nvue 2.1.5+、微信小程序、H5、App、百度小程序、支付宝小程序
anchor经纬度在标注图标的锚点,默认底边中点Object{x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序
clusterId自定义点聚合簇效果时使用NumberApp-nvue 3.1.0+、微信小程序
customCallout自定义气泡窗口ObjectApp-nvue 2.1.5+、微信小程序、支付宝小程序
aria-label无障碍访问,(属性)元素的额外描述StringApp-nvue 3.1.0+、微信小程序
joinCluster是否参与点聚合Boolean如果指定点聚合 此选项值必须设置为true,才会生效App-nvue 3.1.0+、微信小程序

markertap:点击标记图标事件,这里传的是marker中的ID, 所以你需要将id关联其他详细数据。我这里采用的是数组下标作为marker的ID, 因为我的poiLit的item中包含了marker的信息和其他详细数据,在取值的时候用markerId作为数组索引取值很方便

scale: 是地图缩放的范围,根据自身场景调整

latitude, longitude 当前坐标经纬度就不详细说了,通过uni.getLocation获取就可以了

callout: 标记图标上的气泡

item["callout"] = {
content:item.title, display: "ALWAYS", 
bgColor: "#39B54A", color: "#fff", 
borderRadius: 15, padding: '10'}

标签:uniapp,nvue,map,微信,App,程序,Number,2.1
From: https://blog.csdn.net/qq_33130231/article/details/141057107

相关文章

  • JSP个人学习情况统计平台kuy0w--程序+源码+数据库+调试部署+开发环境
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:用户,课程信息,类型,下载文档,学习记录技术要求:    开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技术后端使用SpringBoot,Spring技术主数据库使用......
  • 我35岁程序员不想躺平,转行到大模型赶上这波风口
    35岁的程序员可能会面临以下一些问题或挑战:技术更新:技术行业变化迅速,需要不断学习新技能和新技术来保持竞争力。职业发展:可能会遇到职业发展的瓶颈,比如晋升管理层的机会有限或者想要转行但没有明确的路径。工作压力:随着年龄的增长,家庭和个人生活的责任可能会增加,同时工作......
  • Java计算机毕业设计基于微信小程序的法律问题咨询系统设计与实现前端(开题+源码+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着法治社会的不断推进和公众法律意识的增强,人们对于便捷、高效获取法律咨询服务的需求日益增长。然而,传统法律咨询模式受限于时间、地域及高昂的成......
  • 一个基于SpringBoot实现的图像托管程序
    大家好,我是Java陈序员。今天,给大家介绍一个基于SpringBoot实现的开源图床项目。关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。项目介绍Tbed——一个由Java语言编写、SpringBoot框架开发的开源图像托管程序。具备多对象......
  • 一个企业级的免费开源商城系统,无需专业编程知识,可视化DIY拖拽装修、包含PC、H5、多端
    前言在电子-商务领域,企业经常面临诸多挑战,如高昂的开发成-本、缺乏灵活性、以及难以满足个性化需求等。现有的商城软件往往功能固定,难以适应快速发展和变化的电商环境。为了解决这些痛点,需要一款灵活、可定制且易于扩展的商城系统,能够快速响应市场变化,满足不同企业的独特需求......
  • 数据结构之Map与Set(上)
    找往期文章包括但不限于本期文章中不懂的知识点:个人主页:我要学编程(ಥ_ಥ)-CSDN博客所属专栏:数据结构(Java版) 目录二叉搜索树Map和Set的介绍与使用 Map的常用方法及其示例Set的常用方法及其示例哈希表 冲突-概念冲突-避免-哈希函数设计冲突-避免-负载因子调节......
  • 如何从我的 Python 应用程序更新我的 Facebook Business 令牌?
    我有一个使用FacebookBusiness库的Python应用程序。因此,我需要使用Facebook提供的令牌来访问我的见解并操纵它们。但是,这个令牌有一个很长的到期日期,但我想知道是否有办法自动更新这个令牌在我的应用程序中,这样它就不会停止运行。当然可以!你可以使用Facebook提......
  • 我在制作 python 语音应用程序时遇到错误
    我编写了一个语音聊天应用程序代码,但是当我们运行此代码并加入语音频道时,我收到照片中的错误错误1错误2这是我的代码;客户端代码:importtkinterastkfromtkinterimportmessageboximportpyaudioimportsocketimportthreadingimporttimeHOST=......
  • 基于微信小程序的农业生产资料供应系统设计与实现
    ......
  • 新手的第一个c语言小程序
    作为一个C语言的新手,我深知要想精通这门语言,就必须通过不断的练习来积累经验。因此,我决定从解决高中数学问题入手,编写我的第一个C语言小程序。显然,高中的许多数学问题复杂难解,对于我这个初学者来说,理解答案本身就已经是一项挑战,更不用说用程序来求解了。所以,我选择了数列求和这一......