百度智能小程序 MapContext

2020-09-05 14:20 更新

MapContext

解釋:map 返回值。

屬性說明

屬性名 說明
MapContext.includePoints 縮放視野展示所有經(jīng)緯度
MapContext.getCenterLocation 獲取當前地圖中心的經(jīng)緯度
MapContext.translateMarker 平移 marker
MapContext.moveToLocation 將地圖中心移動到當前定位點
MapContext.getRegion 獲取當前地圖的視野范圍
MapContext.getScale 獲取當前地圖的縮放級別

示例 

在開發(fā)者工具中打開


圖片示例

代碼示例

<view class="wrap">
    <map id="myMap" 
        longitude="{{longitude}}"
        latitude="{{latitude}}"
        style="width: 100%"  
        markers="{{markers}}"
        show-location>
    </map>
    <button type="primary" bindtap="includePoints">縮放視野展示所有經(jīng)緯度</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('經(jīng)度', 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: '動畫結(jié)束啦!',
                    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)
                });
            }
        });
    }
});


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號