QinJs 官网 | QinJs 官网

map

地图组件。

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

平台差异说明

H5	微信小程序	小红书小程序	抖音小程序、飞书小程序	快手小程序
√	√	√	1.63+	√

地图服务商说明

地图服务商	H5	微信小程序
高德	3.6.0+
Goolge	3.2.10+
腾讯	√	√

属性说明

属性名	类型	默认值	说明	平台差异说明
longitude	Number		中心经度
latitude	Number		中心纬度
scale	Number	16	缩放级别，取值范围为 3-20	高德地图缩放比例与微信小程序不同
min-scale	Number	3	最小缩放级别	微信小程序2.13+
max-scale	Number	20	最大缩放级别	微信小程序2.13+
layer-style	Number/String	1	个性化地图	微信小程序2.13+
markers	Array		标记点
polyline	Array		路线	飞书小程序不支持
circles	Array		圆
controls	Array		控件
include-points	Array		缩放视野以包含所有给定的坐标点	微信小程序、H5
enable-3D	Boolean	false	是否显示 3D 楼块	微信小程序2.3.0
show-compass	Boolean	false	是否显示指南针	微信小程序2.3.0
enable-zoom	Boolean	true	是否支持缩放	微信小程序2.3.0
enable-scroll	Boolean	true	是否支持拖动	微信小程序2.3.0
enable-rotate	Boolean	false	是否支持旋转	微信小程序2.3.0
enable-overlooking	Boolean	false	是否开启俯视	微信小程序2.3.0
enable-satellite	Boolean	false	是否开启卫星图	微信小程序2.7.0
enable-traffic	Boolean	false	是否开启实时路况	微信小程序2.7.0
show-location	Boolean		显示带有方向的当前定位点	微信小程序、H5
polygons（支付宝为: polygon）	Array. `<polygon>`		多边形	H5、微信小程序
@markertap	EventHandle		点击标记点时触发， `e.detail = {markerId}`	H5、微信小程序（H5平台需要指定 marker 对象属性 id）
@labeltap	EventHandle		点击label时触发， `e.detail = {markerId}`	微信小程序 2.9.0
@callouttap	EventHandle		点击标记点对应的气泡时触发，`e.detail = {markerId}`
@controltap	EventHandle		点击控件时触发， `e.detail = {controlId}`
@regionchange	EventHandle		视野发生变化时触发	微信小程序、H5
@tap	EventHandle		点击地图时触发; 微信小程序 2.9 支持返回经纬度
@updated	EventHandle		在地图渲染更新完成时触发	微信小程序、H5
@anchorpointtap	EventHandle		点击定位标时触发， `e.detail = {longitude, latitude}`	微信小程序2.13+
@poitap	EventHandle		点击地图 poi 点时触发， `e.detail = {name, longitude, latitude}`	微信小程序2.3.0+

注意

<map> 组件的宽/高推荐写直接量，比如： 750rpx ，不要设置百分比值。
谷歌地图使用 wgs84 坐标，其他地图使用 gcj02 坐标，用错坐标类型会显示偏移。
H5 端高德地图 include-points 属性仅支持 2 个坐标点，表示显示范围的西南角和东北角。

近期新增功能

支持点聚合，适用于 marker 过多场景。
支持彩虹蚯蚓线，常用于路线规划场景。
覆盖物支持调整与其它地图元素的压盖关系。
支持 marker （小车）平移动画，适用于轨迹回放场景。

markers

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

属性	说明	类型	必填	备注	平台差异说明
id	标记点id	Number	是	marker点击事件回调会返回此 id 。建议为每个 marker 设置上 Number 类型 id ，保证更新 marker 时有更好的性能。最大限制 9 位数
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
title	标注点名	String	否	点击时显示， callout 存在时将被忽略	微信小程序、H5
iconPath	显示的图标	String	是	项目目录下的图片路径，支持相对路径写法，以 `/` 开头则表示相对小程序根目录；也支持临时路径
rotate	旋转角度	Number	否	顺时针旋转的角度，范围 0 ~ 360 ，默认为 0	微信小程序
alpha	标注的透明度	Number	否	默认 1 ，无透明，范围 0 ~ 1	微信小程序
width	标注图标宽度	Number	否	默认为图片实际宽度	微信小程序、H5
height	标注图标高度	Number	否	默认为图片实际高度	微信小程序、H5
callout	自定义标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符。	微信小程序
label	为标记点旁边增加标签	Object	否	支持的属性见下表，可识别换行符。	微信小程序、H5
anchor	经纬度在标注图标的锚点，默认底边中点	Object	否	`{x, y}` ， x 表示横向 (0-1) ， y 表示竖向 (0-1) 。 `{x: .5, y: 1}` 表示底边中点	微信小程序、H5
clusterId	自定义点聚合簇效果时使用	Number	否		微信小程序
customCallout	自定义气泡窗口	Object	否		微信小程序
aria-label	无障碍访问，（属性）元素的额外描述	String	否		微信小程序
joinCluster	是否参与点聚合	Boolean	否	如果指定点聚合此选项值必须设置为 `true` ,才会生效	微信小程序

marker 上的气泡 callout

属性	说明	类型	平台差异说明
content	文本	String	微信小程序、H5
color	文本颜色	String	微信小程序、H5
fontSize	文字大小	Number	微信小程序、H5
borderRadius	callout边框圆角	Number	微信小程序、H5
borderWidth	边框宽度	Number	微信小程序
borderColor	边框颜色	String	微信小程序
bgColor	背景色	String	微信小程序、H5
padding	文本边缘留白	Number	微信小程序、H5
display	'BYCLICK':点击显示; 'ALWAYS':常显	String	微信小程序、H5
textAlign	文本对齐方式。有效值: left, right, center	String	微信小程序
anchorX	横向偏移量，向右为正数	Number	微信小程序 2.11.0
anchorY	纵向偏移量，向下为正数	Number	微信小程序 2.11.0

marker 上的标签 label

属性	说明	类型	平台差异说明
content	文本	String
color	文本颜色	String	微信小程序、H5
fontSize	文字大小	Number	微信小程序、H5
x	label的坐标，原点是 marker 对应的经纬度	Number	H5
y	label的坐标，原点是 marker 对应的经纬度	Number	H5
anchorX	label的坐标，原点是 marker 对应的经纬度	Number	微信小程序
anchorY	label的坐标，原点是 marker 对应的经纬度	Number	微信小程序
borderWidth	边框宽度	Number	微信小程序
borderColor	边框颜色	String	微信小程序
borderRadius	边框圆角	Number	微信小程序
bgColor	背景色	String	微信小程序
padding	文本边缘留白	Number	微信小程序
textAlign	文本对齐方式。有效值: left , right , center	String	微信小程序
aria-label	无障碍访问，（属性）元素的额外描述	String	微信小程序

点聚合

当地图上需要展示的标记点 marker 过多时，可能会导致界面上 marker 出现压盖，展示不全，并导致整体性能变差。针对此类问题，推出点聚合能力。

使用流程如下：

MapContext.initMarkerCluster 对聚合点进行初始化配置（可选）； MapContext.addMarkers 指定参与聚合的 marker； MapContext.on('markerClusterCreate', callback) 触发时，通过 MapContext.addMarkers 更新聚合簇的样式（可选）； MapContext.removeMarkers 移除参与聚合的 marker；

polyline

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

属性	说明	类型	必填	备注	平台差异说明
points	经纬度数组	Array	是	`[{latitude: 0, longitude: 0}]`
color	线的颜色	String	否	8 位十六进制表示，后两位表示alpha值，如：#0000AA
width	线的宽度	Number	否
dottedLine	是否虚线	Boolean	否	默认false	微信小程序、H5
arrowLine	带箭头的线	Boolean	否	默认false，微信小程序开发者工具暂不支持该属性	微信小程序
arrowIconPath	更换箭头图标	String	否	在 arrowLine 为 true 时生效	微信小程序
borderColor	线的边框颜色	String	否		微信小程序、H5
borderWidth	线的厚度	Number	否		微信小程序、H5
colorList	彩虹线	Array	否	存在时忽略 color 值	微信小程序
level	压盖关系 abovelabels 显示在所有 POI 之上（默认） abovebuildings 显示在楼块之上 POI 之下 aboveroads 显示在所有 POI 之上	String	否		微信小程序

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

属性	说明	类型	必填	备注
points	经纬度数组	array	是	`[{latitude: 0, longitude: 0}]`
strokeWidth	描边的宽度	Number	否
strokeColor	描边的颜色	String	否	十六进制
fillColor	填充颜色	String	否	十六进制
zIndex	设置多边形 Z 轴数值	Number	否
level	压盖关系 abovelabels 显示在所有 POI 之上（默认） abovebuildings 显示在楼块之上 POI 之下 aboveroads 显示在所有 POI 之上	String	false	微信小程序

circles

在地图上显示圆

属性	说明	类型	必填	备注
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
color	描边的颜色	String	否	8 位十六进制表示，后两位表示alpha值，如： #000000AA ； #00000 为十六进制
fillColor	填充颜色	String	否	8 位十六进制表示，后两位表示alpha值，如： #000000AA ； #00000 为十六进制
radius	半径	Number	是
strokeWidth	描边的宽度	Number	否
level	压盖关系 abovelabels 显示在所有 POI 之上（默认） abovebuildings 显示在楼块之上 POI 之下 aboveroads 显示在所有 POI 之上	String	false	微信小程序

controls

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

属性	说明	类型	必填	备注
id	控件id	Number	否	在控件点击事件回调会返回此id
position	控件在地图的位置	Object	是	控件相对地图位置
iconPath	显示的图标	String	是	项目目录下的图片路径，支持相对路径写法，以 `/` 开头则表示相对项目根目录；也支持临时路径
clickable	是否可点击	Boolean	否	默认不可点击

position

属性	说明	类型	必填	备注
left	距离地图的左边界多远	Number	否	默认为0
top	距离地图的上边界多远	Number	否	默认为0
width	控件宽度	Number	否	默认为图片宽度
height	控件高度	Number	否	默认为图片高度

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

示例查看示例

VueScript

vue

<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"
        />
      </view>
    </view>
  </view>
</template>

<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"
        />
      </view>
    </view>
  </view>
</template>

<script>
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',
        },
      ],
    };
  },
};
</script>

<script>
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',
        },
      ],
    };
  },
};
</script>

三方定位和地图服务收费说明

使用三方定位或者地图服务，需向服务提供商（如：高德地图、百度地图、腾讯地图、谷歌地图）申请商业授权和缴纳费用（5万/年）。

腾讯地图商业授权现优惠政策：买1年送1个月，买2年送1年。如需购买，请速扫以下二维码咨询与购买！

详见

map ​

近期新增功能 ​

点聚合 ​

三方定位和地图服务收费说明 ​

map

近期新增功能

点聚合

三方定位和地图服务收费说明