首页 Web 开发

# 准备事项

1、安装依赖

  • npm i @amap/amap-jsapi-loader --save 或 yarn add @amap/amap-jsapi-loader

2、申请高德地图 key

地址：https://console.amap.com/dev/key/app
注意：添加 key 时 服务平台选择 Web 端 (JS API)

3 、在组件中引入 import AMapLoader from '@amap/amap-jsapi-loader'
4、 securityJsCode 需要填入这条 key 对应的安全密钥

# 示例

t
<template>
  <div id="flightLineMap" style="width: 100%; height: 600px"></div>
</template>
<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
let map = null
<!--模拟数据-->
let flightData = [
  {
    lng: 120.18285386075983,
    lat: 33.29509344535665
  },
  {
    lng: 120.18105394355071,
    lat: 33.29435247296475
  },
  {
    lng: 120.1822555936267,
    lat: 33.29442761387945
  },
  {
    lng: 120.1828782485496,
    lat: 33.29491429118684
  }
]
/** 打开弹窗 */
const initMap = () => {
  AMapLoader.load({
    key: '', // 申请好的 Web 端开发者 Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale'] // 需要使用的的插件列表，如比例尺 'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map('flightLineMap', {
        zoom: 16,// 视图层级
        center: [flightData[0].lng, flightData[0].lat]
      })
      // 创建一条折线
      const flightPath = new AMap.Polyline({
        path: flightData.map((item) => [item.lng, item.lat]), // 线覆盖物路径
        strokeColor: '#03f', // 线颜色
        strokeWeight: 2, // 线宽
        strokeOpacity: 0.8, // 线透明度
        zIndex: 50
      })
      // 将折线添加到地图上
      map.add(flightPath)
      // 添加圆形标记点
      flightData.forEach((item, index) => {
        const marker = new AMap.Marker({
          position: [item.lng, item.lat],
          offset: new AMap.Pixel(-10, -10),
          content: `<div style="width: 20px; height: 20px; background-color: red;border:1px solid #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 12px;">${index + 1}</div>`,
          stopMove: true
        })
        map.add(marker)
      })
    }).catch((e) => {
      console.log(e)
    })
}
<!-- 初始化地图-->
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: '安全密钥'
  }
  initMap()
}),
  onUnmounted(() => {
    map?.destroy()
  })
</script>

# 效果图