map 地图

解释：地图。客户端创建的原生组件，使用时请注意相关限制。

属性说明

示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1

• SWAN
• JS

<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">支持旋转</text>
            <switch bindchange="toggleRotate" checked></switch>
        </view>
    </view>
    <view class="tip-week">工具暂不支持手势控制</view>
</view>

Page({
    data: {
        latitude: '40.048828',
        longitude: '116.280412',
        scale: 16,
        isWeb: false,
        polygons: [],
        drawPolygon: false,
        includePoints: [],
        showLocation: false,
        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',
            title: 'markerId: 2',
            zIndex: 100,
            iconPath: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/demo_location.png',
            rotate: 0,
            width: 30,
            height: 50,
            callout: {
                display: 'ALWAYS',
                content: '百度科技园',
                color: '#000',
                fontSize: '16',
                borderRadius: 50,
                bgColor: '#5B9FFF',
                padding: 2,
                textAlign: 'center'
            }
        }, {
            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);
    },
    /**
     * 点击标记点时触发的事件
     */ 
    bindmarkertap() {
        swan.showToast({
            title: '点击标记啦',
            icon: 'none'
        });
    },
});

代码示例 2：原生组件设置 border 无效，也不可用 cover-view 覆盖为圆角

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• CSS

<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;
}

marker

解释：标记点，用于在地图上显示标记的位置。

属性说明

callout 属性说明

label 属性说明

示例

图片示例

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<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

解释：指定一系列坐标点，从数组第一项连线至最后一项。

属性说明

示例

图片示例

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

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

Page({
    data: {
        latitude: 40.048828,
        longitude: 116.280412,
        polyline: [{
            points: [{
                longitude: 116.278796,
                latitude: 40.048828
            }, {
                longitude: 116.27505,
                latitude: 40.049655
            }],
            color: '#000000AA',
            width: 2,
            dottedLine: true,
            arrowLine: true,
            // arrowIconPath: '开发者服务器图片路径',
            borderColor: '#FFB6C1',
            borderWidth: 5
        }]
    }
});

polygon

解释：指定一系列坐标点，根据 points 坐标数据生成闭合多边形。

属性说明

示例

图片示例

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<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

解释：在地图上显示圆

属性说明

示例

图片示例

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<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 属性说明

示例

图片示例

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<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'
        })
    }
});

Bug & Tip

• Tip：map 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
• Tip：请勿在 scroll-view、swiper、picker-view、movable-view 中使用 map 组件。
• Tip：CSS 动画对 map 组件无效。
• Tip：cover-view、cover-image 组件可覆盖在 map 组件之上。
• Tip：Android 与 iOS 定位精度不同，双端定位存在差异。
• Tip：map 组件使用的经纬度是火星坐标系，调用 swan.getLocation 接口需要指定 type 为 gcj02 。
• Tip：开发者工具由于坐标系不同，定位与客户端存在差异。开发时请以客户端为准。
• Bug：Web 态由于坐标系不同，定位与客户端存在差异，坐标与客户端相比有一定偏移。待后续版本修复。