覆盖物

标记点

添加标记点

let map = new AMap.Map('container')
let marker = new AMap.Marker({
  position: [102.649377, 25.261306]// 位置
})
map.add(marker)// 添加到地图

除了使用 map.add 添加标记物外, 还可使用 maker.setMap 将标记物设置到地图:

maker.setMap(map)

移除标记点

map.remove(marker)

为标记点设置标题

marker.setTitle('这里是昆明')

为标记点设置标签

marker.setLabel({
  offset: new AMap.Pixel(20, 20), // 设置文本标注偏移量
  content: '<div style="font-size: 20px; color: #f00;">昆明</div>', // 设置文本标注内容
  direction: 'right' // 设置文本标注方位
})

添加指定图形的标记点

let marker = new AMap.Marker({
  position: map.getCenter(),
  offset: new AMap.Pixel(-10, -10),
  icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
  title: '昆明'
})
map.add(marker)

如果需要随后设置Icon, 使用

marker.setIcon('//vdata.amap.com/icons/b18/1/2.png')

自定义标记物:

let content = '<div style="font-size: 20px; color: #f00;">昆明</div>'
let marker = new AMap.Marker({
  content: content, // 自定义点标记覆盖物内容
  position: [102.649377, 25.261306], // 基点位置
  offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置
})

添加圆形标记:

let maker = new AMap.CircleMarker({
  center: [102.649377, 25.261306],
  radius: 10 + Math.random() * 10, // 3D视图下，CircleMarker半径不要超过64px
  strokeColor: 'white',
  strokeWeight: 2,
  strokeOpacity: 0.5,
  fillColor: 'rgba(0,0,255,1)',
  fillOpacity: 0.5,
  zIndex: 10,
  bubble: true,
  cursor: 'pointer',
  clickable: true
})
map.add(maker)

点击时添加标记:

map.on('click', function(ev) {
  let marker = new AMap.Marker({
    position: ev.lnglat
  })
  map.add(marker)
})

文档信息

文章标题：覆盖物

原文链接：https://www.xiaoyulive.top/books/amap/js-api-cover.html

← 事件处理定位 →

Design by Quanzaiyu | Power by VuePress

# 覆盖物

# 标记点

覆盖物

标记点