百度智能小程序 地圖

map 地圖

解釋：地圖，客戶端創(chuàng)建的 原生組件，使用時請注意相關(guān)限制。

屬性說明

示例 

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

代碼示例

<view class="wrap">
    <view class="card-area">
        <map class="map"
            longitude="{{longitude}}"
            latitude="{{latitude}}"
            scale="{{scale}}"
            markers="{{markers}}"
            polyline="{{polyline}}"
            polygons="{{drawPolygon ? polygons : []}}"
            circles="{{circles}}"
            controls="{{controls}}"
            show-location="{{showLocation}}"
            include-points="{{includePoints}}"
            enable-3D="{{enable3d}}"
            show-compass="{{showCompass}}"
            enable-overlooking="{{enableOverlooking}}"
            enable-zoom="{{enableZoom}}"
            enable-scroll="{{enableScroll}}"
            enable-rotate="{{enableRotate}}"
            bindmarkertap="onMarkertap" 
            bindcallouttap="onCallouttap" 
            bindcontroltap="onControltap" 
            bindregionchange="onRegionchange" 
            bindtap="onTap" 
            bindupdated="onUpdated"
            bindpoitap="onPoitap">
        </map>
        <view class="item-scroll block border-bottom">
            <text class="switch-text">支持縮放</text>
            <switch bindchange="toggleZoom" checked></switch>
        </view>
        <view class="item-scroll block border-bottom">
            <text class="switch-text">支持拖動</text>
            <switch bindchange="toggleScroll" checked></switch>
        </view>
        <view class="item-scroll block border-bottom" s-if="{{!isWeb}}">
            <text class="switch-text">支持旋轉(zhuǎn)</text>
            <switch bindchange="toggleRotate" checked></switch>
        </view>
    </view>
    <view class="tip-week">工具暫不支持手勢控制</view>
</view>

Page({
    data: {
        latitude: '40.048828',
        longitude: '116.280412',
        scale: 16,
        polygons: [],
        drawPolygon: false,
        includePoints: [],
        showLocation: true,
        enable3d: false,
        showCompass: false,
        enableOverlooking: false,
        enableZoom: true,
        enableScroll: true,
        enableRotate: true,
        markers: [{
            markerId: '1',
            latitude: '40.052751',
            longitude: '116.278796'
        }, {
            markerId: '2',
            latitude: '40.048828',
            longitude: '116.280412',
            callout: {
                display: 'ALWAYS',
                content: '百度科技園'
            }
        }, {
            markerId: '3',
            latitude: '40.049655',
            longitude: '116.27505',
            callout: {
                display: 'ALWAYS',
                content: '西山壹號院'
            }
        }],
        polyline: [{
            points: [{
                longitude: 116.278796,
                latitude: 40.048828
            }, {
                longitude: 116.27505,
                latitude: 40.049655
            }],
            color: '#FF5F41FF',
            width: 2,
            dottedLine: true
        }],
        controls: [{
            controlId: 1,
            iconPath: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/api_logo.png',
            position: {
                left: 0,
                top: 100,
                width: 50,
                height: 50
            },
            clickable: true
        }],
        circles: [{
            latitude: '40.052751',
            longitude: '116.278796',
            color: '#FF5F41FF',
            fillColor: '#21FFFFFF',
            radius: '200',
            strokeWidth: '2'
        }]
    },
    showLocation() {
        this.setData({
            showLocation: !this.data.showLocation
        });
    },
    toggle3d() {
        this.setData({
            enable3d: !this.data.enable3d
        });
    },
    toggleShowCompass() {
        this.setData({
            showCompass: !this.data.showCompass
        });
    },
    toggleOverlooking() {
        this.setData({
            enableOverlooking: !this.data.enableOverlooking
        });
    },
    toggleZoom() {
        this.setData({
            enableZoom: !this.data.enableZoom
        });
    },
    toggleScroll() {
        this.setData({
            enableScroll: !this.data.enableScroll
        });
    },
    toggleRotate() {
        this.setData({
            enableRotate: !this.data.enableRotate
        });
    },
    togglePolygon() {
        this.setData({
            drawPolygon: !this.data.drawPolygon
        });
    },
    onMarkertap(e) {
        console.log('onMarkertap callback:', e);
    },
    onCallouttap(e) {
        console.log('onCallouttap callback:', e);
    },
    onControltap(e) {
        console.log('onControltap callback:', e);
    },
    onRegionchange(e) {
        console.log('onRegionchange callback:', e);
    },
    onTap(e) {
        console.log('onTap callback:', e);
    },
    onUpdated(e) {
        console.log('onUpdated callback:', e);
    },
    onPoitap(e) {
        console.log('onPoitap callback:', e);
    }
});

markers

解釋：標記點，用于在地圖上顯示標記的位置。

屬性說明

callout 屬性說明

label 屬性說明

參考示例

圖片示例

代碼示例： 

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

<view class="wrap">
    <map
        style="width: 100%; height: 300px;"
        longitude="{{longitude}}"
        latitude="{{latitude}}"
        markers="{{markers}}"
        bindmarkertap="bindmarkertap"
        bindcallouttap="bindcallouttap">
    </map>
</view>

Page({
    data: {
        latitude: 40.048828,
        longitude: 116.280412,
        markers: [{
            markerId: 1,
            latitude: 40.048828,
            longitude: 116.280412,
            title: 'markerId: 1',
            zIndex: 100,
            iconPath: '../images/location.png',
            rotate: 90,
            callout: {
                display: 'ALWAYS',
                content: '百度科技園',
                color: '#000',
                fontSize: '16',
                borderRadius: 50,
                bgColor: '#5B9FFF',
                padding: 2,
                textAlign: 'center'
            }
        }, {
            markerId: 2,
            latitude: 40.049655,
            longitude: 116.27505,
            title: 'markerId: 2',
            zIndex: 100,
            rotate: 90,
            alpha: 0.5,
            width: 30,
            height: 50,
            label: {
                'content': 'label',
                'color': '#7B68EE',
                'fontSize': 16,
                'borderWidth': 1,
                'borderColor': '#5B9FFF',
                'borderRadius': 50,
                'bgColor': '#ADCFFF',
                'padding': 5,
                'textAlign': 'center'
            },
            anchor: {x: .5, y: 1},
            callout: {
                display: 'BYCLICK',
                content: '西山壹號院',
                color: '#FFF',
                fontSize: '16',
                borderRadius: 50,
                bgColor: '#5B9FFF',
                padding: 2,
                textAlign: 'center'
            }
        }]
    },
    bindmarkertap() {
        swan.showToast({
            title: '點擊標記啦',
            icon: 'none'
        });
    },
    bindcallouttap() {
        swan.showToast({
            title: '點擊標記上方氣泡啦',
            icon: 'none'
        });
    }
});

polyline

解釋：指定一系列坐標點，從數(shù)組第一項連線至最后一項。

屬性說明

示例

圖片示例

代碼示例 

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

<view class="wrap">
    <map
        style="width: 100%; height: 300px;"
        longitude="{{longitude}}"
        latitude="{{latitude}}"
        polyline="{{polyline}}">
    </map>
</view>

polygon

解釋：指定一系列坐標點，根據(jù) points 坐標數(shù)據(jù)生成閉合多邊形。

屬性說明

示例

圖片示例

代碼示例

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

<view class="wrap">
    <map
        style="width: 100%; height: 300px;"
        longitude="{{longitude}}"
        latitude="{{latitude}}"
        polygons="{{polygons}}">
    </map>
</view>

Page({
    data: {
        latitude: 40.048828,
        longitude: 116.280412,
        polygons: [{
            points: [{
                longitude: 116.278796,
                latitude: 40.048828
            }, {
                longitude: 116.27505,
                latitude: 40.049655
            },{
                longitude: 116.27305,
                latitude: 40.050655
            },{
                longitude: 116.27105,
                latitude: 40.051655
            }],
            strokeWidth: 1,
            strokeColor: '#000000AA',
            fillColor: '#000000AA',
            zIndex: 20
        }]
    }
});

circle

解釋：在地圖上顯示圓

屬性說明

示例

圖片示例

代碼示例 

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

<view class="wrap">
    <map
        style="width: 100%; height: 300px;"
        longitude="{{longitude}}"
        latitude="{{latitude}}"
        circles="{{circles}}">
    </map>
</view>

Page({
    data: {
        scale: 16,
        latitude: 40.048828,
        longitude: 116.280412,
        circles: [{
            latitude: 40.052751,
            longitude: 116.278796,
            color: '#FF5F41FF',
            fillColor: '#FF5F41FF',
            radius: 200,
            strokeWidth: 2
        }]
    }
});

control

解釋：在地圖上顯示控件，控件不隨著地圖移動。

屬性說明

position 屬性說明

示例

圖片示例

代碼示例 

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

<view class="wrap">
    <map
        style="width: 100%; height: 300px;"
        longitude="{{longitude}}"
        latitude="{{latitude}}"
        controls="{{controls}}"
        bindcontroltap="bindcontroltap"
        >
    </map>
</view>

Page({
    data: {
        latitude: 40.048828,
        longitude: 116.280412,
        controls: [{
            controlId: 1,
            iconPath: '/images/navigate.png',
            position: {
                left: 0,
                top: 100,
                width: 50,
                height: 50
            },
            clickable: true
        }]
    },
    bindcontroltap() {
        swan.showToast({
            title: '點擊控件',
            icon: 'none'
        })
    }
});

代碼示例 - 錯誤用法：原生組件設置 border 無效，也不可用 cover-view 覆蓋為圓角

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

<view class="wrap">
    <cover-view class="card-area">
        <map
            longitude="{{longitude}}"
            latitude="{{latitude}}">
        </map>
    </cover-view>
</view>

.card-area { 
    width: 3.88rem;
    height: 2.18rem;
}

Bug & Tip

• Tip：地圖組件的經(jīng)緯度必填，如果不填經(jīng)緯度則默認值是北京的經(jīng)緯度。
• Tip：map 組件是由客戶端創(chuàng)建的原生組件，它的層級是最高的，不能通過 z-index 控制層級。
• Tip：請勿在 scroll-view、swiper、picker-view、movable-view 中使用 map 組件。
• Tip：CSS 動畫對 map 組件無效。
• Tip：cover-view、cover-image 組件可覆蓋在 map 組件之上。
• Bug：map 組件的 markers 的 label 暫不支持換行。
• Tip：Android 與 iOS 定位精度不同，雙端定位存在差異。
• Tip：map 組件使用的經(jīng)緯度是火星坐標系，調(diào)用 swan.getLocation 接口需要指定 type 為 gcj02 。
• Tip：開發(fā)者工具由于坐標系不同，定位與客戶端存在差異。開發(fā)時請以客戶端為準。
• Bug：Web 態(tài)由于坐標系不同，定位與客戶端存在差異，坐標與客戶端相比有一定偏移。待后續(xù)版本修復。