快应用---组件（map）
map组件
1）关于map组件的相关属性
<map style="width:{{width}};height: {{height}}" //自定义组件的宽高
latitude="{{latitude}}" longitude="{{longitude}}" //调整地图组件的中心位置
scale="{{scale}}" coordtype="{{coordtype}}"></map> //缩放级别
2）地图组件支持的四种覆盖物，包括：marker,groundoverlay,polyline 和circle.
markers :[
{
latitude:'',longitude:'',coordType:'wgs84', iconPath:'',width:''
}
]
groundoverlays: [
{
northEast:'', southWest:'',iconPath:'',opacity:0.4
}
],
polylines:[{ points:[POINT1,POINT2]}],
circles: [
{
latitude: POINT1.latitude,longitude:POINT2.longitude,coordType:'wgs84',radius: 50
}
]
3) 展示maker的callout气泡
maker可以通过点击或常显的方式显示一个文本为用来描述和对应的maker相关的信息；
makers:[
{
width: '100%',
height: '50%',
latitude: BEI.latitude,
longitude: BEI.longitude,
coordType:BEI.coordType,
iconPath: '',
width: '100px',
callout:{
content:'这里是\n北京',
padding: '20px 5px 20px 5px',
borderRadius: '20px',
textAlign: 'left',
display: 'always'
}
}
]
4） maker的移动
<map style="width: {{width}};height:{{height}}" id="map" scale="{{scale}}" markers="{{markers}}" polylines="{{polylines}}" @tap="tap"></map>
<script>
const POINT1 = { latitude:'',longitude:'' };
const POINT2 = { latitude:'',longitude:'' };
export default {
private: {
width: 100%,
height: 50%,
scale: 17,
markers: [
{
id:1,
latitude: POINT1.latitude,
longitude:POINT1.longitude,
anchor: [ x: 0.5,y:0.5 ],
iconPath: '',
width: '100px'
}
],
polylines: [{points: [POINT1,POINT2]}}
},
tap(){
this.$element('map').translateMarker({
markerId: 1,
destination: POINT2,
autoRotate:true,
duration: 5000
})
}
}
