map

地图组件。
地图组件用于展示地图，
而定位API只是获取坐标，
请勿混淆两者。

平台差异说明

属性说明

注意

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

  markers

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

marker 上的气泡 callout

marker 上的标签 label

polyline

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

polygon

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

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 {
      id:0, // 使用 marker点击事件 需要填写id
            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 nvue map 更换箭头图标格式参考: https://ask.dcloud.net.cn/article/37901

注意事项

• 小程序和app-vue中，<map> 组件是由引擎创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。在<map>上绘制内容，可使用组件自带的marker、controls等属性，也可以使用<cover-view>组件。App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容，参考。另外App端nvue文件不存在层级问题。从微信基础库2.8.3开始，支持map组件的同层渲染，不再有层级问题。
• App端nvue文件的map和小程序拉齐度更高。vue里的map则与plus.map功能一致，和小程序的地图略有差异。App端使用map推荐使用nvue。
• App端使用到本地图像的话，打包前需要设置资源为释放模式，在manifest文件内app-plus新增runmode节点，设置值为liberate。
• 在涉及层级问题的小程序中和app-vue中，请勿在 scroll-view、swiper、picker-view、movable-view 中使用 <map> 组件。
• 小程序和 app-vue 中，css 动画对 <map> 组件无效。
• map 组件使用的经纬度是国测局坐标，调用 uni.getLocation 接口需要指定 type 为 gcj02。
• <map> 组件在不同平台的底层引擎是不同的：H5、微信小程序为腾讯地图；App、支付宝小程序为高德地图；百度小程序、快应用为百度地图。app-vue也可以使用百度地图，在manifest中配置，打包后生效，但app-nvue只支持高德地图。另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要，建议使用高德地图。
• map 组件默认的api是参考微信小程序的，如需要使用plus.map，可以通过$getAppMap获取原生地图对象，详见。注意nvue的map组件不是plus.map对象，无法使用$getAppMap
• H5 端获取定位信息，需要部署在 https 服务上，本地预览（localhost）仍然可以使用 http 协议。
• 无GPS模块或GPS无信号的 PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。
• App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest文件中勾选相应模块，在SDK配置中填写Appkey。注意申请包名和打包时的包名需匹配一致，证书信息匹配。在manifest可视化界面有详细申请指南。
• H5 端使用地图和定位相关需要在腾讯地图开放平台申请密钥，填写在 manifest.json 中。
• ios nvue Color 不支持 ARGB 十六进制，使用 rgba(r,g,b,a) 代替

  FAQ

  Q：应用中使用了 <map> 组件，打包为App时，提示缺少权限模块怎么办？
  A：App端原生地图，依赖第三方的 SDK，因此打包移动应用时，需要在manifest中勾选相关的权限并填写 key 信息。详见：https://ask.dcloud.net.cn/article/29
  Q：国外应用想使用谷歌地图/google地图怎么办？
  A：1. 可以在web-view下调用谷歌的web地图；2. 可以写一个原生插件封装谷歌原生地图，具体参考uni-app插件市场的原生插件开发教程。插件市场已有三方写好的地图插件。