map 地图

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

属性说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

图片示例

代码示例 ：地图

<view class="wrap">
    <map
        style="width: 100%; height: 300px;"
        longitude="{{longitude}}"
        latitude="{{latitude}}"
        scale="{{scale}}"
        markers="{{markers}}"
        polyline="{{polyline}}"
        polygons="{{polygons}}"
        circles="{{circles}}"
        controls="{{controls}}"
        include-points="{{includePoints}}"
        show-location="{{showLocation}}"
        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>

Page({
    data: {
        scale: 16,
        latitude: 40.048828,
        longitude: 116.280412,
        showLocation: true,
        enable3d: false,
        showCompass: false,
        enableOverlooking: false,
        enableZoom: true,
        enableScroll: true,
        enableRotate: false,
        polygons: [],
        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
        }],
        circles: [{
            latitude: 40.052751,
            longitude: 116.278796,
            color: '#FF5F41FF',
            fillColor: '#FF5F41FF',
            radius: 200,
            strokeWidth: 2
        }],
        controls: [{
            controlId: 1,
            iconPath: '/images/api_logo.png',
            position: {
                left: 0,
                top: 100,
                width: 50,
                height: 50
            },
            clickable: true
        }]
    },
    onReady() {
        console.log('map ready');
        this.mapContext = swan.createMapContext('myMap');
    },
    onMarkertap(e) {
        console.log('onMarkertap callback:');
        console.log(e);
    },
    onCallouttap(e) {
        console.log('onCallouttap callback:');
        console.log(e);
    },
    onControltap(e) {
        console.log('onControltap callback:');
        console.log(e);
    },
    onRegionchange(e) {
        console.log('onRegionchange callback:');
        console.log(e);
    },
    onTap(e) {
        console.log('onTap callback:');
        console.log(e);
    },
    onUpdated(e) {
        console.log('onUpdated callback:');
        console.log(e);
    },
    onPoitap(e) {
        console.log('onPoitap callback:');
        console.log(e);
    }
});

markers

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

属性说明

callout 属性说明

label 属性说明

参考示例

图片示例

参考示例 1： 标记点

在开发者工具中预览效果

<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

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

属性说明

示例

图片示例

代码示例2

在开发者工具中预览效果

<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 坐标数据生成闭合多边形。

属性说明

示例

图片示例

代码示例3:

在开发者工具中预览效果

<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

解释：在地图上显示圆

属性说明

示例

图片示例

代码示例4:

在开发者工具中预览效果

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

示例

图片示例

代码示例5

在开发者工具中预览效果

<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覆盖为圆角 ：

在开发者工具中预览效果

<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：地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。
• Tip：map 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 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 组件使用的经纬度是火星坐标系，调用 swan.getLocation 接口需要指定 type 为 gcj02。
• Tip：开发者工具由于坐标系不同，定位与客户端存在差异。开发时请以客户端为准。