百度智能小程序 MapContext

MapContext

解释：map 返回值。

属性说明

示例 

在开发者工具中打开

图片示例

代码示例

<view class="wrap">
    <map id="myMap" 
        longitude="{{longitude}}"
        latitude="{{latitude}}"
        style="width: 100%"  
        markers="{{markers}}"
        show-location>
    </map>
    <button type="primary" bindtap="includePoints">缩放视野展示所有经纬度</button>
    <button type="primary" bindtap="getCenterLocation">获取位置</button>
    <button type="primary" bindtap="translateMarker">平移 marker</button>
    <button type="primary" bindtap="moveToLocation">移动位置</button>
    <button type="primary" bindtap="getRegion">获取当前地图的视野范围</button>
    <button type="primary" bindtap="getScale">获取当前地图的缩放级别</button>
</view>

Page({
    data: {
        latitude: 40.048828,
        longitude: 116.280412,
        markers: [{
            markerId: 1,
            latitude: 40.052751,
            longitude: 116.278796
        }, {
            markerId: 2,
            latitude: 40.048828,
            longitude: 116.280412,
            callout: {
                display: 'ALWAYS',
                content: '百度科技园'
            }
        }]
    },
    onReady() {
        this.mapContext = swan.createMapContext('myMap');
    },
    getCenterLocation() {
        this.mapContext.getCenterLocation({
            success: res => {
                swan.showModal({
                    title: '位置信息',
                    content: (res.longitude).toFixed(2) + '/' + (res.latitude).toFixed(2)
                });
                console.log('经度', res.longitude);
                console.log('纬度', res.latitude);
            }
        });
    },
    moveToLocation() {
        this.mapContext.moveToLocation();
    },
    translateMarker() {
        this.mapContext.translateMarker({
            markerId: '2',
            destination: {
                latitude: 40.049655,
                longitude: 116.27505
            },
            autoRotate: true,
            rotate: 30,
            duration: 1000,
            animationEnd() {
                swan.showToast({
                    title: '动画结束啦！',
                    icon: 'none'
                });
            },
            success: res => {
                console.log('translateMarker success');
            },
            fail : err => {
                console.log('translateMarker fail', err);
            }
        });
    },
    includePoints() {
        this.mapContext.includePoints({
            padding: [10],
            points: [{
                latitude: 23,
                longitude: 113.33
            }, {
                latitude: 23,
                longitude: 113.3345211
            }],
            success: res => {
                console.log('includePoints success');
            },
            fail: err => {
                console.log('includePoints fail', err);
            }
        });
    },
    getRegion() {
        this.mapContext.getRegion({
            success: res => {
                swan.showModal({
                    title: '视野范围',
                    content: 'northeast: ' + JSON.stringify(res.northeast) + '/' + 'southwest: ' + JSON.stringify(res.southwest)
                });
                console.log('视野范围', res);
            }
        });
    },
    getScale() {
        this.mapContext.getScale({
            success: res => {
                swan.showModal({
                    title: '缩放级别',
                    content: JSON.stringify(res.scale)
                });
            }
        });
    }
});