map

地图。

平台差异说明

属性说明

注意

• <map> 组件的宽/高推荐写直接量，比如：750rpx，不要设置百分比值。
• uni-app 只支持 gcj02 坐标markers

标记点用于在地图上显示标记的位置

marker 上的气泡 callout

marker 上的标签 label

polyline

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

circles

在地图上显示圆

controls

在地图上显示控件，控件不随着地图移动

position

地图组件的经纬度必填，如果不填经纬度则默认值是北京的经纬度。

示例

<template>
    <view>
        <view class="page-body">
            <view class="page-section page-section-gap">
                <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
                </map>
            </view>
        </view>
    </view>
</template>

export default {
    data() {
        return {
            title: 'map',
            latitude: 39.909,
            longitude: 116.39742,
            covers: [{
                latitude: 39.909,
                longitude: 116.39742,
                iconPath: '../../../static/location.png'
            }, {
                latitude: 39.90,
                longitude: 116.39,
                iconPath: '../../../static/location.png'
            }]
        }
    },
    methods: {
    }
}

map 组件相关操作的 JS API：uni.createMapContext

注意事项

• 小程序和 App 中，<map> 组件是由引擎创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。在<map>上绘制内容，可使用组件自带的marker、controls等属性，也可以使用<cover-view>组件。App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容。详见
• 小程序和 App 中，请勿在 scroll-view、swiper、picker-view、movable-view 中使用 <map> 组件。
• 小程序和 App 中，css 动画对 <map> 组件无效。
• map 组件使用的经纬度是国测局坐标，调用 uni.getLocation 接口需要指定 type 为 gcj02。
• <map> 组件在不同平台的底层引擎是不同的：H5、微信小程序为腾讯地图；App、支付宝小程序为高德地图；百度小程序端为百度地图。App端也可以使用百度地图，在manifest的源码视图中配置，具体参考
• map 组件默认的api是参考微信小程序的，如果觉得不够用，可以用plus.map，可以通过$getAppMap获取原生地图对象，详见
• H5 端获取定位信息，需要部署在 https 服务上，本地预览（localhost）仍然可以使用 http 协议。
• 无 GPS 模块的 PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。
• App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest文件中勾选相应模块，在SDK配置中填写Appkey。在manifest可视化界面有详细申请指南。

FAQ

Q：应用中使用了 <map> 组件，打包为原生应用时，提示缺少权限模块怎么办？A：原生的地图，依赖第三方的 SDK，因此打包移动应用时，需要勾选相关的权限并填写 key 信息。详见：http://ask.dcloud.net.cn/article/35090

Q：国外应用想使用谷歌地图/google地图怎么办？A：1. 可以在web-view下调用谷歌的web地图；2. 可以写一个原生插件封装谷歌原生地图，具体参考uni-app插件市场的原生插件开发教程

发现错误？想参与编辑？在 GitHub 上编辑此页面！