在web应用中使用高德地图的能力前期准备登录高德开放平台后在控制台创建应用、添加key 选择Web端(JS API)

基础知识

高德地图使用GCJ-02坐标是经过加密变换后的坐标系统与百度地图/GPS的坐标有所不同

可以使用AMap.convertFrom将GPS转化为高德坐标

前期准备

登录高德开放平台后在控制台创建应用、添加key 选择Web端(JS API) 并得到key和安全密钥

接下来参考文档在react构建地图组件

import { FC, useEffect, useRef } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader'

const MapContainer: FC = () => {
  const mapRef = useRef<any>(null)

  useEffect(() => {
    createMap().then((map) => (mapRef.current = map))
    return () => {
      mapRef.current?.destroy()
    }
  }, [])

  return <div id='container' className='h-full w-full overflow-hidden'></div>
}

export default MapContainer

async function createMap() {
  ;(window as any)._AMapSecurityConfig = {
    securityJsCode: '', // 安全密钥
  }
  const AMap = await AMapLoader.load({
    key: '', // key
    version: '2.0',
    plugins: ['AMap.Scale'],
  })
  const map = new AMap.Map('container', {
    viewMode: '2D',
    zoom: 11,
    center: [116.397428, 39.90923],
  })
  return map
}

接下来将聚焦于AMap.Map类在构造map实例时可以添加其他地图能力实例本身也有函数对地图进行操作也可以监听其中的事件

完整能力参考AMap官方文档

下面将按照官方文档的介绍高德地图的常见能力

展示地图

地图的展示与 zoom/center/mapStyle属性有关

  const map = new AMap.Map('container', {
    zoom: 11,// 缩放比 值越大 地图放大倍数越大 展示的范围就越小
    center: [116.397428, 39.90923],//中心点
    mapStyle: "amap://styles/normal", //地图样式
  })

地图样式参考文档

构造函数中仅传入初始值这些属性可能会被用户操作修改也可以通过后续map.setStatus主动修改

图层

图层可以整体为地图附加信息

添加图层前后

// 官方的交通图层 可以展示交通信息信息情况
const traffic = new AMap.TileLayer.Traffic();

// 变更map的图层(可以传数组)
map.add(traffic)
map.remove(traffic)

// 控制显隐
traffic.hide()
traffic.show()

图层具有setOptions以设置属性

官方图层

完整的图层文档

控件

指地图上的各种按钮如缩放、比例尺等位置仅与地图容器关联不与坐标相关

需要动态引入控件并通过map的addControl将其插入地图中

  AMap.plugin('AMap.ToolBar', function () {
    const toolbar = new AMap.ToolBar() // 缩放器
    map.addControl(toolbar)

  })    
   
    // 如果需要移除控件
    map.removeControl(toolbar)
    
    // 控制显隐
    toolbar.hide()
    toolbar.show()

控件是插件系统的一部分高德地图提供了官方插件

点标记

与控件相比点标记可以添加多个相同类型的

  //点标记显示内容 outerHTML
  const markerContent = `<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">`
  // 点标记经纬度
  const position = new AMap.LngLat(116.397428, 39.90923)
  const marker = new AMap.Marker({
    position,
    content: markerContent,
    // position是marker左上角的坐标 offset是在此基础上的偏移
    // 此处是为了让marker的下边中心处于position位置
    offset: new AMap.Pixel(-13, -30),
    draggable: true, // 允许拖拽
  })
  
  // 添加/移除点标记
  map.add(marker)
  map.remove(marker)
  // 监听标记事件 
  marker.on('click', console.log)

点标记的offset类型是Amap.Pixel 单位是px

完整的点标记文档

多边形

在地图上绘制多边形

  const path = [
    [
      [116.35, 39.92],
      [116.46, 39.92],
      [116.46, 39.86],
      [116.35, 39.86],
    ],
  ]

  const polygon = new AMap.Polygon({
    path: path,
    draggable: true, // 允许拖拽
  })
  map.add(polygon)

path按照顺时针顺序

如果需要镂空多边形

  const path = [
    [
      [116.35, 39.92],
      [116.46, 39.92],
      [116.46, 39.86],
      [116.35, 39.86],
    ],
    // 后面的所有坐标都镂空
    [
      [116.359, 39.9],
      [116.4, 39.9],
      [116.4, 39.869],
      [116.359, 39.869],
    ],
  ]

可以用polygon.on添加事件镂空的部分不触发事件

可以用polygon.setOptions调整颜色样式透明度等

多边形文档

如果需要节点可拖拽参考多边形编辑文档

路径信息

可以使用官方的路径规划能力参考文档

自定义路径绘制

使用Polylines

  const path = [
    [116.4, 39.869],
    [116.46, 39.86],
    [116.35, 39.92],
    [116.35, 39.86],
  ]
  const polyline = new AMap.Polyline({
    path,
    strokeWeight: 10,
    showDir: true,
    strokeOpacity: 1,
    lineJoin: 'round',
    lineCap: 'round',
  })
  map.add(polyline)