小程序地图标记点自定义标签的实现

实现效果:

<map id="map" style="width:100%;heighet:100vh;" latitude="{{latitude1}}" longitude="{{longitude1}}" scale="17" markers="{{markers}}" bindcontroltap="controltap" bindmarkertap="markertap" show-location><block wx:for="{{markers}}" wx:key=""><cover-view slot="callout"><cover-view class="callout" marker-id="{{item.id}}"><!--  carDrivingStatus 1 行驶->蓝色 2 停止->绿色 3 离线->白色 --><cover-view class="dian" wx:if='{{item.carDrivingStatus==1}}' style="color: blue;">·</cover-view><cover-view class="dian" wx:if='{{item.carDrivingStatus==2}}' style="color: chartreuse;">·</cover-view><cover-view class="dian" wx:if='{{item.carDrivingStatus==3}}' style="color: #fff;">·</cover-view>{{item.licensePlateNumber}}</cover-view></cover-view></block>
</map>

css


.dian {font-size: 120rpx;line-height: 12rpx;margin-right: 10rpx;
}.callout {background: rgba(0, 0, 0, 0.5);padding: 10rpx 20rpx 10rpx 10rpx;border-radius: 4rpx;color: white;display: flex;flex-direction: row;font-size: 22rpx;
}

getData(status) {let data = {"id": "",status,}util.request('/g/carExhibition', 'get', data, '', res => {let list = res.data.datalist.forEach((item, idx) => {console.log(item)if (item.lng != "0" && item.carOilBunker) {that.setMapItemMarkers(item.lng, item.lat, item.licensePlateNumber, item.direction, item.carDrivingStatus, item.carOilBunker, idx)}})that.setData({list_data: list,latitude1: list[0].lat,longitude1: list[0].lng})}, err => {wx.showToast({title: '加载数据失败',})})},setMapItemMarkers(longitude, latitude, licensePlateNumber, direction,carDrivingStatus, carOilBunker, idx) {var that = this;let iconPath;// direction 旋转角度// 车牌号 licensePlateNumber// carDrivingStatus 1 行驶->蓝色 2 停止->绿色 3 离线->白色// carOilBunker 1 轻车 2 中车 3 重车var obj_item = {iconPath: "../../../images/car" + carOilBunker + ".png",id: setMapItemMarkers_id,longitude: longitude,latitude: latitude,rotate: Number(direction),licensePlateNumber,carDrivingStatus,customCallout: {anchorX:45,anchorY:45,display: "ALWAYS",},width: 15,height: 45};var circles_aa = {latitude: latitude,longitude: longitude,color: '#FF0000DD',fillColor: '#7cb5ec88',radius: 160,strokeWidth: 1}var circles = this.data.circles || [];circles.push(circles_aa);setMapItemMarkers_id++;var markers = this.data.markers || [];markers.push(obj_item);this.setData({markers//  circles})},

小程序地图标记点自定义标签的实现相关推荐

微信小程序地图标记点，点击标记点显示详细信息源码加效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 实现代码: <!-- <text>{{markers[id].placeName} ...
微信小程序地图标记点marker，点击标记点显示详细信息
项目中想要实现的效果在地图上显示所有数据标点,点击显示详情信息,首先看一下图片是否符合各位的需求,在这里也是学习加深一下直接上代码: wxml: <map id="myMap&quo ...
小程序地图标点,h5腾讯地图标点,vue使用腾讯地图,腾讯地图自定义图标
很多项目都用到了腾讯地图,不管是小程序还是h5,记录一下使用过程! 1.先到腾讯地图官网点击注册注册登陆准备工作先到腾讯地图官网点击注册注册登陆进入控制台申请key,根据自己的实际情况选择key ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图标记点标记点用于在地图上显示标记的位置,不能自定义图标和样式覆盖物覆盖物用于在地图上显示自定义图标,可自定义图标和样式地图组件的经纬度必填, 如 ...
小程序地图插入图标后怎么实现点击图标弹出窗口
1问题描述本次博客的要解决的问题是:小程序地图插入图标后怎么实现点击图标弹出窗口如图: 2算法描述点击标记点获取数据想要在地图等页面上显示弹窗,是使用的是marke的方法,点击标记点获取数据 ...
f2 柱状图滚动钉钉小程序_详解钉钉小程序组件之自定义模态框（弹窗封装实现）...
背景开发钉钉小程序中需要用到模态框文档里也没有自己搞一个- 效果大概长这个样点击指定按钮,弹出模态框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关 ...
textarea支持a标签_微慕小程序开源版A标签优化说明
微慕WordPress小程序所有版本里,对于文章详情里文字内容的解析,都是通过开源组件:wxParse:不过这个组件已经停止维护,微慕小程序在这个组件上做了一些优化,让文章里文字在小程序显示更加完美. ...
微信小程序之callout自定义气泡
最近闲着踩踩地图的坑,一脚下去差点没从坑里爬起来,然后由于某个原因,去研究了微信小程序里面地图callout 这个属性 callout呢,是在标记的点上面显示一个气泡,作为提示用最后展示下效果 ...

小程序地图标记点自定义标签的实现

小程序地图标记点自定义标签的实现相关推荐

最新文章

热门文章