微信小程序map自定义气泡customCallout

这篇具有很好参考价值的文章主要介绍了微信小程序map自定义气泡customCallout。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

案例效果图:

微信小程序map自定义气泡customCallout,微信小程序,小程序

map地图气泡有两种方式:

微信小程序map自定义气泡customCallout,微信小程序,小程序

微信小程序map自定义气泡customCallout,微信小程序,小程序

 

 一种是在marker上的,这种不能够自定义样式,如果需要展示花里胡哨的,采用第一种方式,进行cover-view布局

 一、首先customCallout 是作为一个属性存在的,需要在marker中存在,我开发实例:

 var markers = [{
              iconPath: iconImg,
              id: resp.data.data[0].id,
              latitude: ss[1],
              longitude: ss[0],
              width: 30,
              height: 30,
              customCallout: {
                anchorY: 0, // Y轴偏移量
                anchorX: 0, // X轴偏移量
                display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显
              },
            }]

二、在map上添加对应组件

 <!--地图控件-->
  <map id="map" class="map_css" scale="{{scale}}"  enable-satellite="{{weixing}}"  enable-traffic="{{lukong}}" latitude="{{location.latitude}}" longitude="{{location.longitude}}" show-location="{{showlocation}}" markers="{{markers}}"  bindmarkertap="getMarker">
	<!-- 自定义气泡 -->
	<cover-view slot="callout">
	<!-- <cover-view class="callout"> -->
		
		<cover-view class="customCallout" marker-id="{{customCalloutid}}">
			----自定义布局---
			</cover-view>
		</cover-view>
		
	</cover-view>
	

在这里需要强调,marker-id需要跟marker一直

不然不展示,并且id是number类型文章来源地址https://www.toymoban.com/news/detail-666829.html

到了这里,关于微信小程序map自定义气泡customCallout的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序 map地图(轨迹)

    allMarkers效果图   废话少说直接上马(最后是我遇到的问题) cover-view是气泡弹窗,可以自定义弹窗,要配合js:customCallout,如果是非自定义的话:callout(可以修改颜色、边框宽度、圆角、边距等)有些属性我没加,还是看官方文档(虽然写的。。) 字段说明: allMarkers:模

    2024年02月13日
    浏览(52)
  • 微信小程序使用地图map (详细)

    直接看代码: 可直接赋值实现,图标可根据自己需要更改 小程序地理定位qqmap-wx-jssdk.js:qqmap-wx-jssdk.js 点击可进行下载里边的 :下载微信小程序JavaScriptSDK

    2024年02月11日
    浏览(51)
  • uni微信小程序 map 添加padding

    规划驾车线路的时候,使用uni的 include-points 指定可视范围的时候,会很极限。导致marker不能完全显示。 给地图显示范围添加padding (推荐) 或者获取并修改缩放地图(记得设置中心点) uni文档:点击这里 1的效果图:

    2024年02月04日
    浏览(41)
  • 微信小程序地图控件Map的简单配置及使用

    .wxml .js .wxss

    2024年02月05日
    浏览(65)
  • 微信小程序map视野发生改变时切换定位点

    css js

    2024年02月03日
    浏览(39)
  • 微信小程序原生使用map组件实现轨迹、多边形

    使用地图本身的map组件实现地图 初始化地图: map组件的属性 longitude 必须 Number 中心点经度 latitude 必须 Number 中心点纬度 scale 选填 Number 地图的缩放级别(缩放切换时使用) include-points 选填 Array. 缩放视野以展示所有坐标点 markers 选填 Array. 地图展示的坐标点集合 polyline 选填

    2024年02月03日
    浏览(60)
  • 微信小程序 地图map(电子围栏圆形和多边形)

    正常情况下是没有手机上画电子围栏的,公共平台上我也没找到,所以走了一个歪点子,就是给地图添加点击事件,记录点的位置,在画到电子围栏上就是添加电子围栏了,如果只是显示电子围栏就简单了 一、多边形电子围栏  字段说明: bindtapMap:地图点击方法 creatPolygo

    2024年02月13日
    浏览(61)
  • 微信小程序引用Map地图规划制定路径行走并显示路径

    先上个效果图:     第一次写博客,这个功能是最近接触到要使用到,参考了部分博主的思想逻辑,然后自己动手敲写出来,如若侵权,请联系删帖。

    2024年02月11日
    浏览(49)
  • 微信小程序map 之个性化地图(日出日落主题)-----更新

    微信小程序主题有根据日出日落时间切换深色主题,这样白色的地图在小程序中尤为显眼,由此诞生一个新的需求----个性化地图 地图个性化样式组件是腾讯位置服务为开发者提供的地图高级能力,开发者可以在法律允许的范围内,定制背景面、背景线、道路、POI等多种地图

    2024年02月12日
    浏览(39)
  • 基于uni-app的微信小程序Map事件穿透处理

    业务需要在微信小程序中使用地图组件,上面需要有点位及点位的交互,同时地图上也会有一些悬浮的按钮、弹窗之类的。在微信小程序2.8.x的版本之后,地图这种原生组件是支持同层渲染的,也就是可以通过样式控制层级。在开发者工具中表现正常,但是上了真机后会发现点

    2024年02月11日
    浏览(64)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包