Map - 《Taro 文档帮助手册教程》

sidebar_label: Map
类型
示例代码
MapProps

title: Map

sidebar_label: Map

地图。相关api Taro.createMapContext。

支持情况： Map - 图1 Map - 图2 Map - 图3 Map - 图4 Map - 图5

参考文档

类型

ComponentType<MapProps>

示例代码

import Tabs from ‘@theme/Tabs’ import TabItem from ‘@theme/TabItem’

tsx
class App extends Component {
  onTap () {}
  render () {
    return (
      <Map onClick={this.onTap} />
    )
  }
}

html
<template>
  <map
    id="map"
    style="width: 100%; height: 300px;"
    longitude="113.324520"
    latitude="23.099994"
    scale="14"
    :markers="markers"
    :polyline="polyline"
    :show-location="true"
    @regionchange="regionchange"
    @markertap="markertap"
  />
</template>

<script>
export default {
  data() {
    return {
      markers: [{
        iconPath: "https://avatars2.githubusercontent.com/u/1782542?s=460&u=d20514a52100ed1f82282bcfca6f49052793c889&v=4",
        id: 0,
        latitude: 23.099994,
        longitude: 113.324520,
        width: 50,
        height: 50
      }],
      polyline: [{
        points: [{
          longitude: 113.3245211,
          latitude: 23.10229
        }, {
          longitude: 113.324520,
          latitude: 23.21229
        }],
        color:"#FF0000DD",
        width: 2,
        dottedLine: true
      }]
    }
  },
  methods: {
    regionchange(e) {
      console.log(e.type)
    },
    markertap(e) {
      console.log("markertap:", e.detail.markerId)
    }
  }
}
</script>

MapProps

参数	类型	默认值	必填	说明
longitude	`number`		是	中心经度
latitude	`number`		是	中心纬度
scale	`number`	`16`	否	缩放级别，取值范围为3-20
minScale	`number`	`3`	否	最小缩放级别3-20
maxScale	`number`	`20`	否	最大缩放级别3-20
markers	`marker[]`		否	标记点
covers	`any[]`		否	标记点不推荐: 即将移除，请使用 markers
polyline	`polyline[]`		否	路线
circles	`circle[]`		否	圆
controls	`control[]`		否	控件（即将废弃，建议使用 cover-view 代替）不推荐使用
includePoints	`point[]`		否	缩放视野以包含所有给定的坐标点
showLocation	`boolean`	`false`	否	显示带有方向的当前定位点
polygons	`polygon[]`		否	多边形
subkey	`string`		否	个性化地图使用的 key
layerStyle	`number`	`1`	否	个性化地图配置的 style，不支持动态修改
rotate	`number`	`0`	否	旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角
skew	`number`	`0`	否	倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角
enable3D	`boolean`	`false`	否	展示 3D 楼块
showCompass	`boolean`	`false`	否	显示指南针
showScale	`boolean`	`false`	否	显示比例尺
enableOverlooking	`boolean`	`false`	否	开启俯视
enableZoom	`boolean`	`true`	否	是否支持缩放
enableScroll	`boolean`	`true`	否	是否支持拖动
enableRotate	`boolean`	`false`	否	是否支持旋转
enableSatellite	`boolean`	`false`	否	是否开启卫星图
enableTraffic	`boolean`	`false`	否	是否开启实时路况
setting	MapProps or { [key: string]: any; }		否	配置项提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotate 和 skew，通过 setData 分开设置时无法同时生效，需通过 settting 统一修改。
onTap	`CommonEventFunction`		否	点击地图时触发
onMarkerTap	`CommonEventFunction<onMarkerTapEventDetail>`		否	点击标记点时触发，e.detail = {markerId}
onLabelTap	`CommonEventFunction<onLabelTapEventDetail>`		否	点击label时触发，e.detail = {markerId}
onControlTap	`CommonEventFunction<onControlTapEventDetail>`		否	点击控件时触发，e.detail = {controlId}
onCalloutTap	`CommonEventFunction<onCalloutTapEventDetail>`		否	点击标记点对应的气泡时触发，e.detail = {markerId}
onUpdated	`CommonEventFunction`		否	在地图渲染更新完成时触发
onRegionChange	CommonEventFunction or onRegionEventDetail<”end”>>		否	视野发生变化时触发
onPoiTap	`CommonEventFunction<onPoiTapEventDetail>`		否	点击地图poi点时触发，e.detail = {name, longitude, latitude}
includePadding	{ left: string or number; right: string or number; top: string or number; bottom: string or number; }		否	视野在地图 padding 范围内展示
groundOverlays	`any[]`		否	覆盖物，自定义贴图
tileOverlay	`any[]`		否	覆盖物，网格贴图
optimize	`boolean`		否	开启 optimize 模式后，无需再监听 onRegionChange 来获取并设置新的 scale 值以保证地图不会再回到原来的缩放比例。

API 支持度

API	微信小程序	百度小程序	支付宝小程序
MapProps.longitude	✔️	✔️	✔️
MapProps.latitude	✔️	✔️	✔️
MapProps.scale	✔️	✔️(取值范围为4-21)	✔️(取值范围为5-18)
MapProps.minScale	✔️
MapProps.maxScale	✔️
MapProps.markers	✔️	✔️	✔️
MapProps.covers	✔️
MapProps.polyline	✔️	✔️	✔️
MapProps.circles	✔️	✔️	✔️
MapProps.controls	✔️	✔️	✔️
MapProps.includePoints	✔️	✔️	✔️
MapProps.showLocation	✔️	✔️	✔️
MapProps.polygons	✔️	✔️	✔️
MapProps.subkey	✔️
MapProps.layerStyle	✔️
MapProps.rotate	✔️
MapProps.skew	✔️
MapProps.enable3D	✔️	✔️
MapProps.showCompass	✔️	✔️
MapProps.showScale	✔️
MapProps.enableOverlooking	✔️	✔️
MapProps.enableZoom	✔️	✔️
MapProps.enableScroll	✔️	✔️
MapProps.enableRotate	✔️	✔️
MapProps.enableSatellite	✔️
MapProps.enableTraffic	✔️
MapProps.setting	✔️		✔️
MapProps.onTap	✔️	✔️	✔️
MapProps.onMarkerTap	✔️	✔️	✔️
MapProps.onLabelTap	✔️
MapProps.onControlTap	✔️	✔️	✔️
MapProps.onCalloutTap	✔️	✔️	✔️
MapProps.onUpdated	✔️	✔️
MapProps.onRegionChange	✔️	✔️	✔️
MapProps.onPoiTap	✔️	✔️
MapProps.includePadding			✔️
MapProps.groundOverlays			✔️
MapProps.tileOverlay			✔️
MapProps.optimize			✔️

marker

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

参数	类型	必填	说明	备注
id	`number`	否	标记点id	`marker 点击事件回调会返回此id。建议为每个 marker 设置上 Number 类型 id，保证更新 marker 时有更好的性能。`
latitude	`number`	是	纬度	`浮点数，范围 -90 ~ 90`
longitude	`number`	是	经度	`浮点数，范围 -180 ~ 180`
title	`string`	否	标注点名	`点击时显示，callout 存在时将被忽略`
zIndex	`number`	否	显示层级
iconPath	`string`	是	显示的图标	`项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径和网络图片`
rotate	`number`	否	旋转角度	`顺时针旋转的角度，范围 0 ~ 360，默认为 0`
alpha	`number`	否	标注的透明度	`默认1，无透明，范围 0 ~ 1`
width	string or number	否	标注图标宽度	`默认为图片实际宽度`
height	string or number	否	标注图标高度	`默认为图片实际高度`
callout	`callout`	否	标记点上方的气泡窗口	`支持的属性见下表，可识别换行符。`
customCallout	`customCallout`	否	自定义气泡窗口	`支持的属性见下表，可识别换行符。`
label	`label`	否	为标记点旁边增加标签	`支持的属性见下表`
anchor	`{ x: number; y: number; }`	否	经纬度在标注图标的锚点，默认底边中点	`{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点`
ariaLabel	`string`	否	无障碍访问，（属性）元素的额外描述

callout

marker 上的气泡 callout

参数	类型	说明
content	`string`	文本
color	`string`	文本颜色
fontSize	`number`	文字大小
anchorX	`number`	横向偏移量，向右为正数
anchorY	`number`	纵向偏移量，向下为正数
borderRadius	`number`	边框圆角
borderWidth	`number`	边框宽度
borderColor	`string`	边框颜色
bgColor	`string`	背景色
padding	`number`	文本边缘留白
display	“BYCLICK” or “ALWAYS”	‘BYCLICK’:点击显示; ‘ALWAYS’:常显
textAlign	“left” or “right” or “center”	文本对齐方式。有效值: left, right, center

customCallout

marker 上的自定义气泡 customCallout

customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制，灵活度更高。

参数	类型	说明
display	`string`	‘BYCLICK’:点击显示; ‘ALWAYS’:常显
anchorX	`number`	横向偏移量，向右为正数
anchorY	`number`	纵向偏移量，向下为正数

label

marker 上的气泡 label

参数	类型	说明
content	`string`	文本
color	`string`	文本颜色
fontSize	`number`	文字大小
x	`number`	label的坐标（废弃）不推荐使用
y	`number`	label的坐标（废弃）不推荐使用
anchorX	`number`	label的坐标，原点是 marker 对应的经纬度
anchorY	`number`	label的坐标，原点是 marker 对应的经纬度
borderWidth	`number`	边框宽度
borderColor	`string`	边框颜色
borderRadius	`number`	边框圆角
bgColor	`string`	背景色
padding	`number`	文本边缘留白
textAlign	“left” or “right” or “center”	文本对齐方式。有效值: left, right, center

polyline

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

参数	类型	必填	说明	备注
points	`point[]`	是	经纬度数组	`[{latitude: 0, longitude: 0}]`
color	`string`	否	线的颜色	`十六进制`
width	`number`	否	线的宽度
dottedLine	`boolean`	否	是否虚线	`默认 false`
arrowLine	`boolean`	否	带箭头的线	`默认 false，开发者工具暂不支持该属性`
arrowIconPath	`string`	否	更换箭头图标	`在 arrowLine 为 true 时生效`
borderColor	`string`	否	线的边框颜色
borderWidth	`number`	否	线的厚度

polygon

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

参数	类型	必填	说明	备注
points	`point[]`	是	经纬度数组	`[{latitude: 0, longitude: 0}]`
strokeWidth	`number`	否	描边的宽度
strokeColor	`string`	否	描边的颜色	`十六进制`
fillColor	`string`	否	填充颜色	`十六进制`
zIndex	`number`	否	设置多边形Z轴数值

circle

在地图上显示圆

参数	类型	必填	说明	备注
latitude	`number`	是	纬度	`浮点数，范围 -90 ~ 90`
longitude	`number`	否	经度	`浮点数，范围 -180 ~ 180`
color	`string`	否	描边的颜色	`十六进制`
fillColor	`string`	否	填充颜色	`十六进制`
radius	`number`	是	半径
strokeWidth	`number`	否	描边的宽度

control

在地图上显示控件，控件不随着地图移动。即将废弃，请使用 cover-view

参数	类型	必填	说明	备注
id	`number`	否	控件id	`在控件点击事件回调会返回此id`
position	`position`	是	控件在地图的位置	`控件相对地图位置`
iconPath	`string`	是	显示的图标	`项目目录下的图片路径，支持本地路径、代码包路径`
clickable	`boolean`	否	是否可点击	`默认不可点击`

point

参数	类型	说明
longitude	`number`	经度
latitude	`number`	纬度

position

参数	类型	默认值	说明
left	`number`	`0`	距离地图的左边界多远
top	`number`	`0`	距离地图的上边界多远
width	`number`	`图片宽度`	控件宽度
height	`number`	`图片宽度`	控件高度

onMarkerTapEventDetail

参数	类型
markerId	string or number

onLabelTapEventDetail

参数	类型
markerId	string or number

onControlTapEventDetail

参数	类型
controlId	string or number

onCalloutTapEventDetail

参数	类型
markerId	string or number

RegionChangeDetail

type

CausedByBegin

参数	说明
gesture	手势触发
update	接口触发

CausedByEnd

参数	说明
drag	拖动导致
scale	缩放导致
update	调用更新接口导致

onRegionEventDetail

参数	类型	说明	备注
type	`T`	视野变化开始、结束时触发	`视野变化开始为begin，结束为end`
causedBy	`keyof (T extends "begin" ? CausedByBegin : CausedByEnd)`	导致视野变化的原因	`有效值为 gesture（手势触发）、update（接口触发或调用更新接口导致）、drag（拖动导致）、scale（缩放导致）`
detail	`regionChangeDetail<type>`	视野改变详情

regionChangeDetail

参数	类型	说明
rotate	`number`	旋转角度
skew	`number`	倾斜角度
causedBy	`keyof (T extends "begin" ? CausedByBegin : CausedByEnd)`
type	string or T
scale	`number`
centerLocation	`point`
region	`{ northeast: point; southeast: point; }`

onPoiTapEventDetail

参数	类型
name	`string`
longitude	`number`
latitude	`number`