Map

地图。相关api Taro.createMapContext。

参考文档

类型

ComponentType<MapProps>

示例代码

普通用法

• React
• Vue

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

<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>

自定义气泡

marker 上的自定义气泡 customCallout

import { CoverView, Map, View } from '@tarojs/components'
const normalCallout = {
  id: 1,
  latitude: 23.098994,
  longitude: 113.32252,
  callout: {
    content: '文本内容',
    color: '#ff0000',
    fontSize: 14,
    borderWidth: 2,
    borderRadius: 10,
    borderColor: '#000000',
    bgColor: '#fff',
    padding: 5,
    display: 'ALWAYS',
    textAlign: 'center',
  }
}
const customCallout1 = {
  id: 2,
  latitude: 23.097994,
  longitude: 113.32352,
  customCallout: {
    anchorY: 0,
    anchorX: 0,
    display: 'ALWAYS',
  },
}
const customCallout2 = {
  id: 3,
  latitude: 23.096994,
  longitude: 113.32452,
  customCallout: {
    anchorY: 0,
    anchorX: 0,
    display: 'ALWAYS',
  },
}
const customCallout3 = {
  id: 4,
  latitude: 23.095994,
  longitude: 113.32552,
  customCallout: {
    anchorY: 0,
    anchorX: 0,
    display: 'ALWAYS',
  },
}
const customMarkers = [
  customCallout1,
  customCallout2,
  customCallout3,
]
const mapMarkers = [
  normalCallout,
  ...customMarkers
]
export default function Index() {
  return (
    <Map
      setting={{}}
      markers={mapMarkers}
      latitude={23.096994}
      longitude={113.324520}
      style={{ height: '100vh', width: '100vw' }}
    >
      <CoverView slot='callout'>
        {
          customMarkers.map(item => (
            /** 自定义样式的 callout */
            <CoverView marker-id={item.id} key={item.id} >
              <View>导航{item.id}</View>
            </CoverView>
          ))
        }
      </CoverView>
    </Map>
  )
}

MapProps

API 支持度

marker

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

callout

marker 上的气泡 callout

label

marker 上的气泡 label

polyline

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

polygon

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

circle

在地图上显示圆

control

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

point

position

onMarkerTapEventDetail

onLabelTapEventDetail

onControlTapEventDetail

onCalloutTapEventDetail

onRegionChangeEventDetail

regionChangeDetail

onPoiTapEventDetail

API 支持度