快应用---组件（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

                                               })

                                        }

 

                               }

 

转载于:https://www.cnblogs.com/sunqq/p/11225006.html