小程序地图多个 circles 使用demo

效果图：

代码：

var that;
const app = getApp()
const util = require("../../utils/util.js")
const data = require("../../utils/map.js")
Page({data: {pageShow: false,scale: 15,obj: {},longitude: 116.34665554470486,latitude: 39.9463560655382,in_val: '',showModalStatus: false,key: 'sadsad',markers: [],circles: []},onLoad(options) {data.map((item) => {this.setMapItemMarkers(item.longitude, item.latitude)})console.log('data', data)this.setData({latitude: data[0].latitude,longitude: data[0].longitude,})},// 设置起点终点坐标setMapItemMarkers(longitude, latitude) {var obj_item = {iconPath: "/img/seat.png",id: 0,longitude: longitude,latitude: latitude,width: 30,height: 30};var circles_aa = {latitude: latitude,longitude: longitude,color: '#FF0000DD',fillColor: '#7cb5ec88',radius: 160,strokeWidth: 1}var circles = this.data.circles || [];var markers = this.data.markers || [];markers.push(obj_item);circles.push(circles_aa);this.setData({markers, circles})},})

wxml

  <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}"bindcontroltap="controltap" markers="{{markers}}" circles="{{circles}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: {{view.Height}}px;"></map>

css

map{position: fixed;top: 0;bottom: 0;left: 0;width: 100%;right: 0;height: 100%;
}
page{height: 100%;
}

小程序地图多个 circles 使用demo相关推荐

微信小程序地图获取地点信息（打卡签到功能为例）-2020-7-26
目录微信小程序地图获取地点信息(打卡签到功能为例) 效果图前提步骤首先需要了解的代码部分配置性代码功能性代码 demo 下载微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
php小程序地图处理,微信小程序地图 map
微信小程序地图 map 微信小程序map 地图标记点标记点用于在地图上显示标记的位置,不能自定义图标和样式覆盖物覆盖物用于在地图上显示自定义图标,可自定义图标和样式地图组件的经纬度必填, 如 ...
最新小程序授权+php后端（附demo源码）
参考博客:小程序授权+php后端(附demo源码)_流情的博客-CSDN博客_php小程序正所谓计划永远赶不上变化,鉴于小程序端已经更改了微信授权登录的接口,因此特来补充一下.原先的wx.getUs ...
微信小程序语音聊天智能对话（demo）
项目中用到了 olami sdk把录音或者文字转化为用户可以理解的json字符串. 效果图重要jS代码: //手指按下时语音转文字voiceToChar:function(){var urls = ...
小程序地图定位授权取消后再次授权
更博啦,背景:webview+小程序,新增收货地址是h5页面,调的小程序地图.获取到地址后再将值带入网页中.最近写的项目中遇到地图定位弹框拒绝授权后,无法再次调起地图组件,页面显示空白,用户使用体验差 ...
微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
微信小程序--地图上添加图片
如何在微信小程序地图添加上,添加图片? 在微信小程序中,地图的层级最高,所以我们没有办法,通过定位,在地图上添加图片等信息; 处理办法: 添加控件:controls; 其中有个属性position,进 ...

小程序地图多个 circles 使用demo

小程序地图多个 circles 使用demo相关推荐

最新文章

热门文章