uniapp 小程序 地图<map> 渲染标注点 且自定义气泡内容(slot写到页面中/样式自定义)

这篇具有很好参考价值的文章主要介绍了uniapp 小程序 地图<map> 渲染标注点 且自定义气泡内容(slot写到页面中/样式自定义)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图: (气泡可随意定义样式)

uniapp实现地图气泡,uni-app,小程序,uni-app

页面内容:  (slot为自定义标注气泡)

<map :style="mapStyle" show-location="true" :latitude="latitude" id="map" :longitude="longitude":markers="markers">
	<cover-view slot="callout">
		<block v-for="(item,index) in markers" :key="index">
			<cover-view class="customCallout" :marker-id="item.id">
				<cover-view class="content">
					{{item.id}} 内容
				</cover-view>
			</cover-view>
		</block>
	</cover-view>
</map>

获取经纬度方法:

//获取经纬度
getLication: function() {
	var that = this;
	uni.getLocation({
		type: 'gcj02',
		success: function(res) {
			// console.log('当前位置的经度:' + res.longitude);
			// console.log('当前位置的纬度:' + res.latitude);
			that.longitude = res.longitude;
			that.latitude = res.latitude;
		},
		fail(err) {
			console.log(err);
		}
	});
},

数据整理方法: (整理各坐标点经纬度和信息到maekers中)

//获取到的充电站展示到地图中
filterMapMarkers: function() {
	var list = this.changingStationList;
	console.log("充电站list", list)
	var markers = [];
	for (let i = 0; i < list.length; i++) {
		let markersItem = {
			id: i,
			latitude: list[i].location[0],
			longitude: list[i].location[1],
			iconPath: '/static/image/icon/icon-map-location.png',
			width: '35rpx',
			height: '46rpx',
			customCallout: {
			anchorY: 0, // Y轴偏移量
			anchorX: 0, // X轴偏移量
			display: 'ALWAYS' ,// 一直展示
			
			},
		}
		markers.push(markersItem);
	}
	this.markers = markers;
},

css内容:文章来源地址https://www.toymoban.com/news/detail-542491.html

.customCallout {
	box-sizing: border-box;
	background-color: #fff;
	background: #FFFFFF;
	box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
	border-radius: 4rpx;
	display: inline-flex;
	padding: 6rpx 24rpx;
	justify-content: center;
	align-items: center;
	color: #2A7BE2;
}

到了这里,关于uniapp 小程序 地图<map> 渲染标注点 且自定义气泡内容(slot写到页面中/样式自定义)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uniapp 小程序 map设置地图缩放失效解决方法

    解决办法在需要设置前调取地图查询缩放等级方法,重新设置更新缩放等级后再设置需要的缩放等级就可以缩放了

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

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

    2024年02月12日
    浏览(93)
  • 小程序导航穿透且自定义导航栏

    需求 实现小程序隐藏头部导航栏,且导航栏穿透无高度,并且要定义返回事件 在 app.json 里面把 “navigationStyle” 设置为 “custom” 这样子之后页面就只会保留右上角胶囊按钮。

    2024年02月16日
    浏览(36)
  • 【uniapp 小程序】解决 map 组件出现标点(地图)自动偏移或 @regionchange 频繁触发的问题

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

    2024年02月03日
    浏览(41)
  • uniapp的manifest.json配置后,支付宝小程序include不生效,map高级渲染

                    支付宝小程序在使用map组件时,使用高级渲染需要使用xml组件,在                  manifest.json下配置include字段,编译完没有该字段,不生效。                                                          这里是支付宝文档:支付宝官

    2024年02月07日
    浏览(42)
  • uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示

    预期效果如下,蓝色为用户位置,红色为店铺位置 均为自定义图标 实际发布后手机上的效果 (此处忽略位置先只关注图标问题) 可以很明确的看到自定义图标失效了,使用了原生自带的图标 关键代码如下 1. 图标问题 在采用自定义图标时 请使用图片 不要使用 svg 类型的,

    2024年02月16日
    浏览(62)
  • 微信小程序自定义tabBar详细教程,且自适应尺寸和实现高斯模糊版

    进入下面小程序可以体验效果 :   custom 必须是true 必须是 “custom-tab-bar” 这个名字 custom-tab-bar/index ,必须是index 然后该文件夹目录下的代码 高斯模糊代码 backdrop-filter: blur(10px); background-color: rgb(0 0 0 / .10); 例如:我的 在需要跳转的页面当作加入下面代码,否则tabBar不生

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

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

    2024年02月09日
    浏览(42)
  • 高德地图自定义绘制园区区域,区域描边,并添加自定义内容maker标注

    绘制自定义区域第一步需要获取指定区域的边界坐标点list,可以在高德地图官网的工具中获取 高德选点工具,拿到区域边界点list后就是绘制,区域绘制有几种方式,具体可查看高德的API,大体可用Wall和Prism两种方式,区别是wall没有区域填充颜色,Prism可以填充,所以我选择

    2024年02月12日
    浏览(49)
  • #Uniapp:map地图组件

    示例 属性说明 属性名 类型 默认值 说明 平台差异说明 longitude Number 中心经度 latitude Number 中心纬度 scale Number 16 缩放级别,取值范围为3-20 高德地图缩放比例与微信小程序不同 theme String normal 主题(satellite 或 normal)只在初始化时有效,不能动态变更(仅Android支持) 京东小程

    2024年01月25日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包