当前位置:K88软件开发文章中心编程全书微信小程序 → 文章内容

微信小程序地图 map

减小字体 增大字体 作者:佚名  来源:网上搜集  发布时间:2019-1-15 14:59:16

由 ?﹏???ζ???﹏﹏? 创建,youj 最后一次修改 2016-09-24 微信小程序map地图。属性名类型默认值说明最低版本longitudeNumber 中心经度 latitudeNumber 中心纬度 scaleNumber16缩放级别,取值范围为5-18 markersArray 标记点 coversArray 即将移除,请使用 markers polylineArray 路线 circlesArray 圆 controlsArray 控件 include-pointsArray 缩放视野以包含所有给定的坐标点 show-locationBoolean 显示带有方向的当前定位点 bindmarkertapEventHandle 点击标记点时触发 bindcallouttapEventHandle 点击标记点对应的气泡时触发1.2.0bindcontroltapEventHandle 点击控件时触发 bindregionchangeEventHandle 视野发生变化时触发 bindtapEventHandle 点击地图时触发 注意: covers 属性即将移除,请使用 markers 替代 markers标记点用于在地图上显示标记的位置 属性说明类型必填备注最低版本id标记点idNumber否marker点击事件回调会返回此id latitude纬度Number是浮点数,范围 -90 ~ 90 longitude经度Number是浮点数,范围 -180 ~ 180 title标注点名String否  iconPath显示的图标String是项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 rotate旋转角度Number否顺时针旋转的角度,范围 0 ~ 360,默认为 0 alpha标注的透明度Number否默认1,无透明 width标注图标宽度Number否默认为图片实际宽度 height标注图标高度Number否默认为图片实际高度 callout自定义标记点上方的气泡窗口Object否{content, color, fontSize, borderRadius, bgColor, padding, boxShadow, display}1.2.0label为标记点旁边增加标签Object否{color, fontSize, content, x, y},可识别换行符,x,y原点是marker对应的经纬度1.2.0anchor经纬度在标注图标的锚点,默认底边中点Object否{x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点1.2.0marker 上的气泡 callout属性说明类型content文本Stringcolor文本颜色StringfontSize文字大小NumberborderRadiuscallout边框圆角NumberbgColor背景色Stringpadding文本边缘留白Numberdisplay'BYCLICK':点击显示; 'ALWAYS':常显Stringpolyline指定一系列坐标点,从数组第一项连线至最后一项属性说明类型必填备注最低版本points经纬度数组Array是[{latitude: 0, longitude: 0}] color线的颜色String否8位十六进制表示,后两位表示alpha值,如:#000000AA width线的宽度Number否  dottedLine是否虚线Boolean否默认false arrowLine带箭头的线Boolean否默认false,开发者工具暂不支持该属性1.2.0borderColor线的边框颜色String否 1.2.0borderWidth线的厚度Number否 1.2.0circles在地图上显示圆属性说明类型必填备注latitude纬度Number是浮点数,范围 -90 ~ 90longitude经度Number是浮点数,范围 -180 ~ 180color描边的颜色String否8位十六进制表示,后两位表示alpha值,如:#000000AAfillColor填充颜色String否8位十六进制表示,后两位表示alpha值,如:#000000AAradius半径Number是 strokeWidth描边的宽度Number否 controls在地图上显示控件,控件不随着地图移动属性说明类型必填备注id控件idNumber否在控件点击事件回调会返回此idposition控件在地图的位置Object是控件相对地图位置iconPath显示的图标String是项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径clickable是否可点击Boolean否默认不可点击position属性说明类型必填备注left距离地图的左边界多远Number否默认为0top距离地图的上边界多远Number否默认为0width控件宽度Number否默认为图片宽度height控件高度Number否默认为图片高度地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。示例:<!-- map.wxml --><map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>// map.jsPage({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 50 }], polyline: [{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 113.324520, latitude: 23.21229 }], color:"#FF0000DD", width: 2, dottedLine: true }], controls: [{ id: 1, iconPath: '/resources/location.png', position: { left: 0, top: 300 - 50, width: 50, height: 50 }, clickable: true }] }, regionchange(e) { console.log(e.type) }, markertap(e) { console.log(e.markerId) }, controltap(e) { console.log(e.controlId) }})Bug & Tiptip:map组件是由客户端创建的原生组件,它的层级是最高的。tip: 请勿在scroll-view中使用map组件。tip:css动画对map组件无效。tip:map组件使用的经纬度是火星坐标系,调用wx.getLocation接口需要指定type为gcj02

微信小程序地图 map