uniapp中map组件打点/地图上显示圆/设置map圆的透明度(十六进制颜色透明度)

这篇具有很好参考价值的文章主要介绍了uniapp中map组件打点/地图上显示圆/设置map圆的透明度(十六进制颜色透明度)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp中map组件打点/地图上显示圆/设置map圆的透明度(十六进制颜色透明度),uniapp,uni-app,微信小程序,小程序

		<view class="box">
			<map
				style="width: 100%; height: 300px;"
				:latitude="latitude"
				:longitude="longitude"
				:markers="covers"
				:circles="circles"
			></map>
		</view>
export default {
	data() {
		return {
		    // 中心经纬度
			latitude: 39.909,
			longitude: 116.39742,
			// 显示圆配置
			circles: [
				{
					latitude: 39.909,
					longitude: 116.39742,
					color: '#54C3FF',
					// 填充颜色
					fillColor: '#A3FF746A',
					// 圆半径
					radius: 150,
					// 边
					strokeWidth: 1
				}
			],
			// 打点
			covers: [
				{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath:
						'../../static/images/grab-a-single.png'
				},
				{
					latitude: 39.9,
					longitude: 116.39,
					iconPath:
						'../../static/images/grab-a-single.png'
				}
			]
		};
	}
};

地图上显示圆

circles

在地图上显示圆

属性	    说明	类型	必填	备注
latitude	纬度	Number	是	浮点数,范围 -90 ~ 90
longitude	经度	Number	是	浮点数,范围 -180 ~ 180
color	 描边的颜色	String	否	8位十六进制表示,**后两位表示alpha值**,如:#000000AA;#00000为十六进制
fillColor 填充颜色	String	否	8位十六进制表示,**后两位表示alpha值**,如:#000000AA;#00000为十六进制
radius	   半径	    Number	是	
strokeWidth	描边的宽度	Number	否	
level	压盖关系,默认为 abovelabels	String	false	微信小程序

圆的颜色设置

一般来说我们都是想设置成透明的圆,十六进制的后两位表示颜色
eg:#0000006A
6A就是表示透明度,数字越大透明度越高文章来源地址https://www.toymoban.com/news/detail-522709.html

到了这里,关于uniapp中map组件打点/地图上显示圆/设置map圆的透明度(十六进制颜色透明度)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【uniapp 小程序】解决 map 组件出现标点(地图)自动偏移或 @regionchange 频繁触发的问题

    在业务开发中出现了地图的中心标点向右侧缓慢移动的问题,在我解决后又发现了 @regionchange 方法出现了无限调用的问题。这几个问题属于微信 map 地图组件迟迟未修复的bug。 本文仅解决与我相似的问题以做参考,并会附上对应的问题与参考的博客。 1、地图无操作下出现缓

    2024年02月03日
    浏览(40)
  • uniapp使用map组件设置自定义气泡

    前段时间做了一个app端地图的页面,记录一下 官方的文档只告诉了我们怎么设置自定义气泡,没有说具体怎么实现,插槽名叫什么 下面是一个案例,插槽名叫 callout ,使用时必须用 cover-view 标签包裹,不然它的层级不够,显示不到地图上面。

    2024年02月13日
    浏览(37)
  • uniapp之使用map组件显示接收过来的经纬度

    目录 前言 效果图 提示 总代码 分析 1.显示自己位置的属性 2.markers 点标记 由于项目的需求,我需要从主页面接收经纬度,并渲染至地图上面,同时呢,也要在该位置上显示图标标记点(红色),与此同时也要显示自己位置(蓝色点),这个简单的功能就不需要使用高德地图

    2024年02月13日
    浏览(34)
  • uniapp 小程序和app map地图上显示多个酷炫动态的标点,头像后端传过来,真机测试有效

    最近正在做小程序地图,收到ui 给的图,一开始以为很简单的,但在看了ui 给的图以后,发现没有这么简单。 下面是ui给的图: 于是花了很长的时间,走了很多坑才最终实现,来看效果链接: https://s19.aconvert.com/convert/p3r68-cdx67/2sq95-zprfy.gif 图片如下: 接下来我将花点时间来说

    2024年02月09日
    浏览(42)
  • echarts 使用地图,设置背景图片和高亮图片,点击实现高亮显示,更换散点图图片,高亮散点图形,3D悬浮效果展示地图,集成Vue组件

    先看下   需要实现的效果: 第一步 需准备需要的插件  1  注意新版 echarts 的引入方式为:  import * as echarts from \\\'echarts\\\',这里我把 echarts 直接挂载到了Vue上,本项目使用echarts比较多,这样的话很方便,也可以在需要echarts的模块按需引入        在main.js中添加以下代码:

    2024年02月10日
    浏览(52)
  • 租房小程序使用uniapp展示地图map

    开源字节的租房小程序一个关于房屋租赁类的APP,用的uni-app实现 ,这种app少不了的就是经纪人,位置信息。我们的代码开源免费,欢迎交流使用。 map地图组件使用时直接在template中使用map/map标签,标签中可嵌套map属性 map最常用到的属性:     longitude  中心经度     la

    2024年02月09日
    浏览(38)
  • 小程序map拖动地图显示地图中心标记点及经纬度方法

    最近做毕设,需要获取地点坐标,有了地图地图,想想怎么来简单点。 就上网搜了搜(官方有提供地图选点返回经纬度的,但是感觉手指操作不太精准,就想着换一种) 然后自己写了个demo(代码再后面) 大体思路是在map中心放个很小的圈圈定位用(map中flex垂直水平居中不

    2024年02月05日
    浏览(36)
  • 【完美解决】 Python pyecharts Map 地图数据不显示

    Python数据可视化,使用 Pyecharts.charts 模块中的Map,并导入数据来构建全国疫情热力地图 B站 黑马程序员 Python课程【P106 第一阶段 - 第十一章 - 02全国疫情地图构建】   本人在学习该章节课程时,代码和视频中的代码是完全一致的,但是生成的地图却和视频中不一样,生成结

    2024年02月14日
    浏览(73)
  • uiniapp 地图map组件自定义气泡customCallout属性

    使用cover-view标里面不能带其他标签否则会报错: [Component] view: cover-view/ 内只能嵌套 cover-view/ cover-image/ button/ navigator/ ad/,组件的子节点树在真机上都会被忽略。(env: Windows,mp,1.06.2206090; lib: 2.25.0)  

    2024年02月12日
    浏览(47)
  • uniapp小程序map(点击地图增加maker,聚合、自定义聚合样式)

    功能背景 小程序端开发地图组件,点击地图上任何一个位置,增加一个maker,点击maker触发另外的事件。缩放地图进行聚合显示,自定义聚合样式 效果图 正常样式 聚合效果 注意:微信开发者工具是不支持聚合效果的,需要真机调试才能看到效果 代码实现

    2024年02月12日
    浏览(93)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包