联系我们 - 广告服务
您的当前位置:主页 > 布局 > 开发 >

地图组件

来源:未知 编辑:admin 时间:2018-01-19
导读: 移动应用中地图是必不可缺的内容,通过地图我们可以很直观地表现出地理信息,为此小程序提供了map/组件和定位相关的API。本小节主要讲解map/组件,它主要负责展示性的功能,地理位置的获取将在后续API中讲解。由于需要适配三端,在小程序中我们不能使用map/
  移动应用中地图是必不可缺的内容,通过地图我们可以很直观地表现出地理信息,为此小程序提供了<map/>组件和定位相关的API。本小节主要讲解<map/>组件,它主要负责展示性的功能,地理位置的获取将在后续API中讲解。由于需要适配三端,在小程序中我们不能使用<map/>组件以外的地图插件,如高德地图、百度地图,经过几次发版后,目前小程度地图组件正能满足大部分需求。小程序中的<map/>组件主要负责地理位置信息的简单展示,它没有百度地图、高德地图那样丰富的API,目前地图具备绘制图标、路线、半径等能力,在<scroll-vitw/>中不能使用<map/>组件,组件属性如下:·latitude:中心纬度。·longitude:中心经度。·scale:缩放级别,默认为16。·markers:标记点,用于在地图上显示标记的位置,不能自定义图标和样式,每个标记点属性如下:·id:标记点id,marker点击事件回调会返回此id。·latitude:纬度,浮点数,范围-90~90,必填项。·longitude:经度,浮点数,范围-180~180,必填项。·title:标注点名。·iconPath:显示的图标,项目目录下的图片路径,支持相对路径写法,必填项。
·rotate:旋转角度,顺时针旋转的角度,范围0~360,默认为0.·alpha:标注的透明度,默认1,无透明。·width:标注图标宽度,默认为图片实际宽度。·height:标注图标高度,默认为图片实际高度。·polyline:路线,指定一系列坐标点,从数组第一项连线至最后一项,数组元素属性如下:·points:经纬度数组,如:[{latitude:0,longitude:0}],必填项。·color:线的颜色,8位十六进制表示,后两位表示alpha值,如:#000000AA。
width:线的宽度。·dottedLine:是否为虚线,默认为false。·circles:圆,数组类型,在地图上显示圆,数组元素属性如下:·latitude:纬度,浮点数,范围-90~90,必填项。·longitude:经度,浮点数,范围-180~180必填项。·color:描边的颜色,8位十六进制表示,后两位表示alpha值,如:#000000AA。·fillColor:填充颜色,8位十六进制表示,后两位表示alpha值,如:#000000AA。·radius:半径,必填项。·strokeWidth:描边的宽度。
controls:控件。·id:控件id,在控件点击事件回调会返回此id。·position:控件在地图的位置,控件相对地图位置,必填项,position元素属性如下:·left:距离地图的左边界多远,默认为0。·top:距离地图的上边界多远,默认为0。·width:控件宽度,默认为图片宽度。·height:控件高度,默认为图片高度。·iconPath:显示的图标,相对应用根目录路径的图片,必填项。·clickable:是否可点击,默认不可点击。
·include-points:缩放视野以包含所有给定的坐标点。·show-location:显示带有方向的当前定位点。·bindmarkertap:点击标记点时触发。·bindcontroltap:点击控件时触发。·bindregionchange:视野发生变化时触发。·bindtap:点击地图时触发。
  在下面示例中,我们使用两个marker标记起始位置和结束位置,用polyline绘制路线,然后通过controls创建了一个按钮,如图所示。

代码如下:
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" circles="{{circles}}" scale="14" control="{{controls}}" bindcontroltap= "controltap" markers="{{markers}}" bindmarkertap="markertap" polyline= "{{polyline}}" bindregionchange="
regionchange" show-location style="width: 100%; height: 300px;"></map> Page({   data: {     latitude: 30.5491861989,     longitude: 104.0680165911,     scale : 5,     // 设置标记点     markers: [       {iconPath: "./images/flag.png",id: 0,latitude: 30.5491861989, longitude: 104.0680165911,width: 30,height: 30},       {iconPath: "./images/flag.png",id: 1,latitude: 30.5468832218, longitude: 104.0568588833,width: 30,height: 30}     ],     // 设置路线     polyline: [{       // 按顺序设置5个点
points: [         {longitude: 104.0680165911,latitude: 30.5491861989},          {longitude: 104.0687752749,latitude: 30.5493485980},          {longitude: 104.0688698344,latitude: 30.5470634483},          {longitude: 104.0568588833,latitude: 30.5468832218}       ],       color:"#0000ffDD",       width: 2,       dottedLine: true     }],     // 设置2个图标 controls: [{     id: 1,iconPath: './images/location.png',     position: {left: 0,top: 250,width: 30,height: 30},     clickable: true
}]   },   // 地图发生变化时触发   regionchange(e) {     // type可以区分是开始拖动还是结束拖动     console.log(e.type)   },   // 标记点点击时触发   markertap(e) {     // 根据标记点markerId区分     console.log(e.markerId)   },   // 点击controls设置的图标   controltap(e) {      // 通过markerId区分按钮     console.log(e.controlId)   } })

责任编辑:admin

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

上一篇:video
下一篇:画布组件

网友评论:

在“\templets\demo\comments.htm”原来的内容全部删除,插入第三方评论代码,如果不需要评论功能,删除comments.html里面的内容即可
推荐使用友言、多说、畅言(需备案后使用)等社会化评论插件

Copyright © Tricks资讯网 版权所有
本站所有资讯来源于网络 如有侵权请联系QQ:940910888 技术支持鹏博科技
Top