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
})
}
}