微信小程序在地图上标点 markers 画圈显示范围 circles

源代码：

var EARTH_RADIUS = 6378.137; //地球半径
Page({/*** 页面的初始数据*/data: {// 存放当前位置经纬度latitude: "",longitude: "",//自定义markers数组，用于地图上特定点的显示；从数据库读取当前位置周围1km以内的点，赋值到本数组markers: [{// 标记点（iconPath图像路径,id应该无所谓 可以用来判断用户点击了哪个marker把,经纬度，还有图像高度、宽度）iconPath: "../../icons/dingwei.png",id: 1,latitude: "28.227",longitude: "112.935",height: 34},{iconPath: "../../icons/dingwei.png",id: 2,latitude: "28.224",longitude: "112.939",height: 34},{iconPath: "../../icons/dingwei.png",id: 3,latitude: "28.230",longitude: "112.943",height: 34},],// 画圆的参数设定（color边界框线颜色，radius半径，这里设了等于没设，因为后面会根据画面来匹配大小，stokeWidth边界框线粗细）circles: [{latitude: '',longitude: '',color: '#ff4163',fillColor: '#7cb5ec88',radius: 400,strokeWidth: 2}],},onLoad: function () {this.getCrlcle()},onShow: function () {// 拿到当前经纬度，并赋值wx.getLocation({type: 'gcj02',}).then(res => {console.log(res);this.setData({latitude: res.latitude,longitude: res.longitude,// 注意json数组赋值的格式'circles[0].latitude': res.latitude,'circles[0].longitude': res.longitude})console.log(this.data.circles);}).catch(err => {wx.showModal({title: "提示",content: "获取定位信息失败",showCancel: false})})},// 点击marker的响应事件markertap: function (e) {console.log("点击marker", e);},// 计算距离rad: function (d) {return d * Math.PI / 180.0;},getDistance: function (lng1, lat1, lng2, lat2) {var radLat1 = this.rad(lat1);var radLat2 = this.rad(lat2);var a = radLat1 - radLat2;var b = this.rad(lng1) - this.rad(lng2);var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +Math.cos(radLat1) * Math.cos(radLat2) *Math.pow(Math.sin(b / 2), 2)));s = s * EARTH_RADIUS;s = Math.round(s * 10000) / 10000;return s; //返回数值单位：公里},// 设置radios半径getCrlcle() {this.wxmap = wx.createMapContext('map')this.wxmap.getRegion({}).then(res => {console.log(res + 'get');let lng1 = res.northeast.longitude;let lat1 = res.northeast.latitude;let lng2 = res.southwest.longitude;let lat2 = res.southwest.latitude;let longitude = lng1 - lng2;let latitude = lat1 - lat2;let flag = longitude > latitude ? true : false;let radius = 0;//计算得到短边，然后再通过*1000转变为m，除2得到半径，*0.8优化显示，让圈圈只占界面的80%！if (flag) {radius = this.getDistance(lng1, lat1, lng1, lat2) * 1000 / 2 * 0.8;} else {radius = this.getDistance(lng1, lat1, lng2, lat1) * 1000 / 2 * 0.8;}this.setData({"circles[0].radius": radius});console.log(this.data.circles[0].radius);})},
})

<view class="showMap"><map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14.5" controls="{{controls}}" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" show-location="true" style="width: 100%; height: 100%;" circles="{{circles}}"></map>
</view>

微信小程序在地图上标点 markers 画圈显示范围 circles相关推荐

uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
微信小程序—map地图实现标记多个位置
前言: 在这里给大家介绍一个地标搜索网站(可精准获取经纬度,备注有介绍): 中国城市列表-卫星地图-地球在线小程序官方地图 map 文档参考小程序官方地图 map 相关 API (地图组件控制) ...
java+SpringBoot+HTML+Mysq基于微信小程序的掌上博物馆游览
详细功能设计:请点击下面链接查看 java+SpringBoot+HTML+Mysq基于微信小程序的掌上博物馆游览_哔哩哔哩_bilibili 源码+论文获取: 源码+论文获取请私信获取摘要本 ...
高德地图api调用demo_微信小程序----高德地图API实现的DEMO
[实例简介] 微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO.简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了! ...
微信小程序百度地图API移动选点
微信小程序百度地图API移动选点本文首发微信小程序百度地图API移动选点因为业务需要使用百度地图API,参考一位大佬编写腾讯API的思路和方法,改造成百度地图API移动选点. 思路: wxml前端 ...
腾讯位置服务--微信小程序JSSDK地图开发
腾讯位置服务–微信小程序JSSDK地图开发 1.腾讯位置服务文档传送门:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview [ ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html  <view class="cont ...

微信小程序在地图上标点 markers 画圈显示范围 circles

微信小程序在地图上标点 markers 画圈显示范围 circles相关推荐

最新文章

热门文章