LabelMarker

使用

<amap>
  <amap-labels-layer :zooms="[3, 20]" :z-index="1000" collision>
    <amap-label-marker v-bind="poi" />
  </amap-labels-layer>
</amap>

LabelMarker需要与LabelsLayer配合使用

Source Code

Props

LabelMarker 属性

属性名	类型	备注
name	string
position	number[2]
zooms	number[2]
opacity	number
rank	number
zIndex	number
visible	boolean
icon	IconOptions	下详
text	TextOptions	下详
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

IconOptions

属性名	类型	备注
size	number[2] | AMap.Size
clipOrigin	number[2] | AMap.Pixel
clipSize	number[2] | AMap.Size
anchor	Anchor | number[2] | AMap.Pixel	*1

1. Anchor为'top-left'| 'top-center'|'top-right'|'middle-left'|'center'| 'middle-right'| 'bottom-left'| 'bottom-center'| 'bottom-right'

TextOptions

属性名	类型	备注
content	string
direction	'top' | 'right' | 'bottom' | 'left' | 'center'
offset	number[2] | AMap.Pixel
zooms	number[2]
style	TextStyleOptions	下祥

TextStyleOptions

属性名	类型	备注
fontSize	number
fillColor	string
strokeColor	string
padding	string | number[]
backgroundColor	string
borderColor	string
borderWidth	number
fold	boolean

LabelsLayer 属性

属性名	类型	备注
visible	boolean
zIndex	number
opacity	number
collision	boolean
allowCollision	boolean
zooms	number[]
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

Events

事件名	备注
mousedown
mouseup
touchstart
touchmove
touchend
click
mousemove
mouseover
mouseout

Example

<template>
  <demo-view hide-control @map-complete="onMapComplete">
    <template v-slot:map-content>
      <amap-labels-layer :zooms="[3, 20]" :z-index="1000" collision>
        <amap-label-marker v-for="(poi, i) in pois" :key="i" v-bind="poi" />
      </amap-labels-layer>
    </template>
  </demo-view>
</template>

<script>
const pois = Object.freeze(
  require('../../public/assets/data/restaurants.json')
);

export default {
  data() {
    return {
      pois,
    };
  },
  methods: {
    async onMapComplete(map) {
      await this.$nextTick();
      map.setFitView();
    },
  },
};
</script>