MapContext.updateComponents

2025-04-29 08:32

Update the map API incrementally.

Parameters

Property	Type	Required	Description
latitude	Number	No	The latitude of the center location.
longitude	Number	No	The longitude of the center location.
scale	Number	No	The zoom level. The value ranges from 3 to 20.
min-scale	Number	No	Used to limit the minimum zoom level. The value ranges from 3 to 20. Note: For iOS, only Google map is supported.
max-scale	Number	No	Used to limit the maximum zoom level. The value ranges from 3 to 20. Note: For iOS, only Google map is supported.
skew	Number	No	The skew angle. The value ranges from 0 to 80.
rotate	Number	No	The angle at which the map is rotated clockwise, ranging from 0 to 360 degrees.
show-compass	Boolean	No	An indicator of whether to display the compass. It is shown when the map is rotated.
enable-overlooking	Boolean	No	An indicator of whether to enable the overlook function.
enable-zoom	Boolean	No	An indicator of whether to enable the zoom function.
enable-scroll	Boolean	No	An indicator of whether to enable the scrolling function.
enable-rotate	Boolean	No	An indicator of whether to enable the rotation function.
success	Function	No	The callback function that is called upon successful call.
fail	Function	No	The callback function that is called upon failed call.
complete	Function	No	The callback function that is called upon call completion (to be executed upon either call success or failure).
markers	Array<Object>	No	The location marker for overlays. For details, see markers.
polyline	Array<Object>	No	The polyline overlays. For details, see polyline.
polygon	Array<Object>	No	The polygon overlays. For details, see polygon.
circles	Array<Object>	No	The circle overlays. For details, see circles
controls	Array<Object>	No	The controls in the map view. For details, see controls
tile-overlay	Object	No	The overlay, which is a grid texture/image. Example: copy `{ url:'http://xxx', tileWidth:256, tileHeight:256, zIndex:1, }`
include-points	Array<Object>	No	Slightly zoom out the map to include these points. Example: copy `[{ latitude: 30.279383, longitude: 120.131441, }]`
include-padding	Object	No	Show the map inside the area that includes paddings. Example: copy `{ left:0, right:0, top:0, bottom:0 }`
settings	Object	No	The settings. Example: copy `{ gestureEnable: 1, showCompass: 1, tiltGesturesEnabled: 1 }`
ground-overlays	Array<Object>	No	The overlay, which is a customized texture/image. Example: copy `[{ //Need to change the id when refreshing id:'0', // right-top, left-bottom 'include-points':[{ latitude: 39.935029, longitude: 116.384377, },{ latitude: 39.939577, longitude: 116.388331, }], image:'/image/overlay.png', alpha:0.25, zIndex:1 }]`

Sample code

copy
Page({
    data: {
        mapCtx: null
    },
    onReady() {
        this.mapCtx = my.createMapContext('map');
    },
    
    updateComponents() {
        this.mapCtx.updateComponents({
            scale: 15, 
            longitude: 120.125872, 
            latitude: 30.272960, 
            setting: {
                gestureEnable: 1, 
                showCompass: 1, 
                tiltGesturesEnabled: 1, 
            },
            // markers 
            markers: [
                {
                    id: 1,
                    latitude: 30.272960,
                    longitude: 120.125872,
                    width: 19,
                    height: 31,
                    iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',
                    callout: {
                        content: '1',
                    },
                },
                {
                    id: 2,
                    latitude: 30.275960,
                    longitude: 120.125872,
                    width: 19,
                    height: 31,
                    iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',
                    callout: {
                        content: '2',
                    },
                }
            ],
            // polyline
            polyline: [
                {
                    points: [
                        {
                            latitude: 30.272960,
                            longitude: 120.125872,
                        },
                        {
                            latitude: 30.272960,
                            longitude: 120.124572,
                        },
                        {
                            latitude: 30.274260,
                            longitude: 120.124572,
                        }
                    ],
                    color: '#FF0000DD',
                    width: 10,
                }
            ],
         
            'include-points': [
                {
                    latitude: 30.272960,
                    longitude: 120.125872,
                },
                {
                    latitude: 30.275960,
                    longitude: 120.125872,
                },
            ],
            
            'include-padding': {
                left: 10,
                right: 0,
                top: 0,
                bottom: 0
            },
            //ground-overlay
            'ground-overlays': [{
                //need to update the id when refreshing
                id: '10',
                // ensure the location of the ground-overlay
                'include-points': [{
                    latitude: 39.935029,
                    longitude: 116.384377,
                }, {
                    latitude: 39.939577,
                    longitude: 116.388331,
                }],
                image: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',
            }],
            //title-overlay, grid
            'tile-overlay': {
              url: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',
              tileWidth: 64,
              tileHeight: 64,
              zIndex: 1,
            },
            success: res => {
                console.log('res', res);
            },
            fail: res => {
                console.log('fail', res);
            }
        });
    }
});