// map.js var EARTH_RADIUS = 6378.137; //地球半径 function rad(d) { return d * Math.PI / 180.0; } function getDistance(lng1, lat1, lng2, lat2) { var radLat1 = rad(lat1); var radLat2 = rad(lat2); var a = radLat1 - radLat2; var b = rad(lng1) - 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;//返回数值单位：公里 } Page({ data: { markers:[ { iconPath: '/resources/others.png', id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50 } ], circles:[{ latitude: '23.099994', longitude: '113.324520', color: '#FF0000DD', fillColor: '#7cb5ec88', radius: 400, strokeWidth: 2 }], polygons:[{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 114.324520, latitude: 23.21229 }], strokeWidth:5, zIndex:1, }], controls: [{ id: 1, iconPath: '/resources/location.png', position: { left: 0, top: 300 - 50, width: 50, height: 50 }, clickable: true }] }, onLoad: function (options) { this.getCrlcle(); }, getCrlcle(){ this.wxmap = wx.createMapContext('map') this.wxmap.getRegion({ success: 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 = getDistance(lng1, lat1, lng1, lat2) * 1000 / 2 * 0.8; } else { radius = getDistance(lng1, lat1, lng2, lat1) * 1000 / 2 * 0.8; } this.setData({ "circles[0].radius": radius }); } }); }, getCenterLocation() { this.wxmap = wx.createMapContext('map') var that=this; this.wxmap.getCenterLocation({ success(res) { console.log(res.longitude) console.log(res.latitude) that.getCrlcle(); that.setData({ "circles[0].longitude": res.longitude, "circles[0].latitude": res.latitude }); } }) }, regionchange(e) { console.log(e.type) this.getCenterLocation(); }, markertap(e) { console.log(e.markerId) console.log(e); }, controltap(e) { console.log(e.controlId) } }) wxml
<map id="map" longitude="113.324520" latitude="23.099994" scale="13" circles="{{circles}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" show-location bindregionchange="regionchange" style="width: 100%; height: 500px;" > </map>