使用Vue3+TS玩转高德地图

不知道大家在开发的时候，是否遇到过需要利用地图去展示一些地理位置信息，而又不知道从哪里下手，下面我将使用高德地图带大家完成地图相关内容的开发

内容主要有：

地图的初始化，

地图内置插件的使用（鹰眼，图层切换，放大缩小，比例尺，视图位置），

地点搜索(自定义，不使用内置组件，不方便)，

搜索中心地点方圆公里内容并展示内容（可配置：1公里，2公里，n公里），

地图打点（自定义打点内容），

获取个人当前位置坐标，

自定义弹窗信息展示，

行驶路径的轨迹回放（包括开始，结束，暂停，继续）

1.地图的初始化(需要去高德地图申请开发者的秘钥，然后再进行开发，这里默认已经拥有了开发者秘钥)

//下包
npm i amap/amap-jsapi-loader

2.初始化地图(plugins其实就是和webpack一样的插件，我们引入可以实现多种不同的功能)

<template>
  <div id="Map"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
// 挂载秘钥
window._AMapSecurityConfig = {
  securityJsCode: "xxxxx",
};
const initMap = async () => {
  const AMap = await AMapLoader.load({
    key: "xxxxxx", //申请好的 Web 端开发者 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.Scale",
      "AMap.ToolBar",
      "AMap.ControlBar",
      "AMap.HawkEye",
      "AMap.MapType",
      "AMap.PlaceSearch",
      "AMap.AutoComplete",
      "AMap.Geolocation",
      "AMap.CitySearch",
      "AMap.MarkerCluster",
      "AMap.MoveAnimation",
    ], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
  });
  map = new AMap.Map("Map", {
    zoom: 17, //地图放大程度
    resizeEnable: true,
    viewMode: "3D", //设置地图模式
    center: [116.397428, 39.90923], // 初始化地图中心点位置
  });
};
onMounted(() => {
  initMap();
});
</script>
<style scoped lang="less">
#Map {
  width: 100%;
  height: 100%;
}
</style>

此时就可以看到一个地图在页面上显示了

下面可以进行深度开发，实现我描述的功能（这里直接贴全部代码，粘贴即用，这里我就不进行详细解析了，后续会在B站出一个视频，大家可以结合在这里慢慢看）

<template>
  <div id="Map"></div>
  <div class="control">
    <a-checkbox-group direction="vertical" @change="change" v-model="control">
      <a-checkbox value="1">比例尺</a-checkbox>
      <a-checkbox value="2">工具条</a-checkbox>
      <a-checkbox value="3">工具条方向盘</a-checkbox>
      <a-checkbox value="4">鹰眼</a-checkbox>
      <a-button type="primary" @click="getMyAddress"> 获取当前地址 </a-button>
      <div class="circleSize">
        <a-button type="primary" @click="updateRadius(1000)"> 1000 </a-button>
        <a-button type="primary" @click="updateRadius(2000)"> 2000 </a-button>
        <a-button type="primary" @click="updateRadius(3000)"> 3000 </a-button>
      </div>
      <div class="circleSize">
        <a-button type="primary" @click="beginTrace"> 开始轨迹 </a-button>
        <a-button type="primary" @click="pauseAnimation"> 暂停轨迹 </a-button>
        <a-button type="primary" @click="resumeAnimation"> 继续轨迹 </a-button>
        <a-button type="primary" @click="stopAnimation"> 停止轨迹 </a-button>
      </div>
    </a-checkbox-group>
  </div>
  <div class="search">
    <a-select v-model="location" @search="getAddressInfo" allow-search>
      <a-option
        v-for="item in addressinfo"
        :value="item.id"
        @click="goAddress(item)"
      >
        <img :src="item?.photos[0]?.url" alt="" class="imgs" />
        {{ `${item.cityname}-${item.address}-${item.name}` }}
      </a-option>
    </a-select>
  </div>

  <!-- <div id="panel"></div> -->
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { Message } from "@arco-design/web-vue";

import AMapLoader from "@amap/amap-jsapi-loader";
// 挂载秘钥
window._AMapSecurityConfig = {
  securityJsCode: "xxxxx",
};

const control = ref(["1", "2", "3", "4"]);
const location = ref("");
const addressinfo = ref<any>([]);
const change = (val: any) => {
  control.value = val;
  toggle();
};

const toggle = () => {
  const controls: any = {
    scale: { instance: scale.value, identifier: "1" },
    toolbar: { instance: toolbar.value, identifier: "2" },
    controlBar: { instance: controlBar.value, identifier: "3" },
    hawEye: { instance: hawEye.value, identifier: "4" },
  };

  for (const key in controls) {
    const controlInstance = controls[key].instance;
    const identifier = controls[key].identifier;
    if (control.value.includes(identifier)) {
      controlInstance.show();
    } else {
      controlInstance.hide();
    }
  }
};

// 自动聚集往中心点
const updateCenter = (newLocation) => {
  const lnglat = new AMapOutside.LngLat(newLocation.lng, newLocation.lat);
  map.setCenter(lnglat);
};

const addressCenter = ref<any>([]);
// 去往当前gps点位
const goAddress = (item) => {
  map.clearMap();
  const { photos, cityname, address, name, location } = item;
  addressCenter.value = [location.lng, location.lat];
  const markerContent = `<div class='casemark''>
    案发点位
    <img src="${photos[0]?.url}" style='width: 50px;
    height: 50px;'>
    <div>
     <div>${cityname}</div>
     <div>${address}</div>
     <div>${name}</div>
    </div>
  </div>`;

  const position = new AMapOutside.LngLat(location.lng, location.lat); //Marker 经纬度
  const marker = new AMapOutside.Marker({
    position: position,
    content: markerContent, //将 html 传给 content
    offset: new AMapOutside.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
  });
  map.add(marker);
  getCaseAddress();
  setCircle(1000);
  updateCenter(location);
};

// 获取周边信息
const getCaseAddress = () => {
  // const point = []
  addressinfo.value.forEach((item, index) => {
    const { photos, cityname, address, name, location } = item;
    const position = new AMapOutside.LngLat(location.lng, location.lat); //Marker 经纬度
    // 证据点位
    // point.push({weight: 8, lnglat: [location.lng, location.lat]})
    const marker = new AMapOutside.Marker({
      position: position,
      icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
      anchor: "bottom-center",
      offset: new AMapOutside.Pixel(0, 0),
    });
    marker.setMap(map);
    // 设置鼠标划过点标记显示的文字提示
    marker.setTitle("我是marker的title");
    // 设置label标签
    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
    marker.setLabel({
      direction: "right",
      offset: new AMapOutside.Pixel(10, 0), //设置文本标注偏移量
      content: `<div class='info'>证据${index}${cityname}-${address}-${name}</div>`, //设置文本标注内容
    });

    const markerContent = `<div class="evi"'> 
      <img src="${photos[0]?.url}">
      <div class='eviMarks'>
       <div>证据点位</div>
       <div>${cityname}</div>
       <div>${address}</div>
       <div>${name}</div>
        </div>
       </div>`;
    const infoWindow = new AMapOutside.InfoWindow({
      position,
      content: markerContent,
      offset: new AMapOutside.Pixel(16, -45),
    });
    marker.on("click", () => {
      infoWindow.open(map);
    });
  });
  // MarkerCluster.setData(point);
};
// 搜索范围
const Circle = ref();
const updateRadius = (number) => {
  Circle.value.setRadius(number);
};
const setCircle = (radius = 20) => {
  if (addressCenter.value.length !== 2) {
    return;
  }
  Circle.value = new AMapOutside.Circle({
    center: addressCenter.value, //圆心
    radius: radius, //半径
    strokeColor: "white", //轮廓线颜色
    strokeWeight: 2, //轮廓线宽度
    strokeOpacity: 0.5, //轮廓线透明度
    fillColor: "rgba(0,0,255,1)", //圆点填充颜色
    fillOpacity: 0.5, //圆点填充透明度
    zIndex: 10, //圆点覆盖物的叠加顺序
    cursor: "pointer", //鼠标悬停时的鼠标样式
  });
  //圆形 Circle 对象添加到 Map
  map.add(Circle.value);
  map.setFitView();
};

const getAddressInfo = (val) => {
  placeSearch.value.search(val, (status, result) => {
    if (status !== "error") {
      addressinfo.value = result?.poiList?.pois;
    }
  });
};

const getMyAddress = () => {
  geolocation.value.getCurrentPosition(function (status, result) {
    Message.success(result);
  });
  // citySearch.value.getLocalCity(function (status, result) {
  //   if (status === "complete" && result.info === "OK") {
  //     // 查询成功，result即为当前所在城市信息
  //     console.log(result);
  //     Message.success(result.city);
  //   }
  // });
};

// 轨迹回放
const traceMarker = ref();
let lineArr = [
  [116.478935, 39.997761],
  [116.478939, 39.997825],
  [116.478912, 39.998549],
  [116.478912, 39.998549],
  [116.478998, 39.998555],
  [116.478998, 39.998555],
  [116.479282, 39.99856],
  [116.479658, 39.998528],
  [116.480151, 39.998453],
  [116.480784, 39.998302],
  [116.480784, 39.998302],
  [116.481149, 39.998184],
  [116.481573, 39.997997],
  [116.481863, 39.997846],
  [116.482072, 39.997718],
  [116.482362, 39.997718],
  [116.483633, 39.998935],
  [116.48367, 39.998968],
  [116.484648, 39.999861],
];
const TOTAL_DURATION = 20 * 1000; // 总播放时间为20秒，转换为毫秒
const SEGMENTS_COUNT = lineArr.length - 1; // 总段数（最后一个点不需要移动）
const beginTrace = () => {
  const durationPerSegment = Math.floor(TOTAL_DURATION / SEGMENTS_COUNT); // 每一段的平均时长
  traceMarker.value.moveAlong(lineArr, {
    duration: durationPerSegment, // 根据总时长和段数计算的时长
    autoRotation: true,
  });
};
// 
const pauseAnimation = () => {
  traceMarker.value.pauseMove();
}
const resumeAnimation = () => {
  traceMarker.value.resumeMove();
}
const stopAnimation = () => {
  traceMarker.value.stopMove();
}
const drawTrace = () => {
  traceMarker.value = new AMapOutside.Marker({
    map: map,
    position: lineArr[0],
    icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
    offset: new AMapOutside.Pixel(-13, -26),
  });
  // 绘制轨迹
  new AMapOutside.Polyline({
    map: map,
    path: lineArr,
    showDir: true,
    strokeColor: "#28F", //线颜色
    // strokeOpacity: 1,     //线透明度
    strokeWeight: 6, //线宽
    // strokeStyle: "solid"  //线样式
  });
  // 行走过的颜色和设置
  const passedPolyline = new AMapOutside.Polyline({
    map: map,
    strokeColor: "#AF5", //线颜色
    strokeWeight: 6, //线宽
  });
  traceMarker.value.on("moving", function (e) {
    passedPolyline.setPath(e.passedPath);
    map.setCenter(e.target.getPosition(), true);
  });
  map.setFitView();
}

let map: any = null;
let AMapOutside: any = null;
let MarkerCluster: any = null; //点聚合
const toolbar = ref();
const scale = ref();
const controlBar = ref();
const hawEye = ref();
const placeSearch = ref();
const geolocation = ref();
const citySearch = ref();

const initMap = async () => {
  const AMap = await AMapLoader.load({
    key: "xxxxx", //申请好的 Web 端开发者 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.Scale",
      "AMap.ToolBar",
      "AMap.ControlBar",
      "AMap.HawkEye",
      "AMap.MapType",
      "AMap.PlaceSearch",
      "AMap.AutoComplete",
      "AMap.Geolocation",
      "AMap.CitySearch",
      "AMap.MarkerCluster",
      "AMap.MoveAnimation",
    ], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
  });
  AMapOutside = AMap;
  map = new AMap.Map("Map", {
    zoom: 17,
    resizeEnable: true,
    viewMode: "3D", //设置地图模式
    center: [116.397428, 39.90923], // 初始化地图中心点位置
  });
  drawTrace()
  // 图层切换
  const mapType = new AMap.MapType();
  map.addControl(mapType); // 图层切换

  toolbar.value = new AMap.ToolBar({
    position: {
      bottom: "110px",
      left: "40px",
    },
  }); //放大缩小插件
  map.addControl(toolbar.value);

  scale.value = new AMap.Scale(); //比例尺
  map.addControl(scale.value);

  controlBar.value = new AMap.ControlBar({
    position: {
      bottom: "110px",
      left: "100px",
    },
  });
  map.addControl(controlBar.value); //视图位置

  hawEye.value = new AMap.HawkEye({
    opened: false,
  });
  map.addControl(hawEye.value); //鹰眼

  geolocation.value = new AMap.Geolocation({
    enableHighAccuracy: true, //是否使用高精度定位，默认:true
    maximumAge: 0, //定位结果缓存0毫秒，默认：0
    convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
    buttonPosition: "LT", //定位按钮停靠位置，默认：'LB'，左下角
    buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
    showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
    showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
    panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
    zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
  });
  map.addControl(geolocation.value); // 定位组件
  // 不那么精确的定位
  citySearch.value = new AMap.CitySearch();
  // 地址搜索
  placeSearch.value = new AMap.PlaceSearch({
    pageSize: 15, // 单页显示结果条数
    pageIndex: 1, // 页码
    city: "", // 兴趣点城市
    citylimit: false, //是否强制限制在设置的城市内搜索
    map: map, // 展现结果的地图实例
    // panel: "panel", // 结果列表将在此容器中进行展示。
    autoFitView: false, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见
  });
  MarkerCluster = new AMap.MarkerCluster(map, [], {
    gridSize: 20, // 聚合网格大小
    maxClusterRadius: 50, // 聚合半径
    zoomToClusterThreshold: 12, // 缩放到多少层级时开始聚合
  });
};

onMounted(() => {
  initMap();
});
</script>
<style scoped lang="less">
#Map {
  width: 100%;
  height: 100%;
}
.control {
  top: 0;
  position: absolute;
}
.mapType {
  top: 0;
  right: 200px;
  position: absolute;
}
.search {
  top: 10px;
  left: 300px;
  position: absolute;
  width: 500px;
  :deep(.arco-select-view-single) {
    background-color: #fff;
  }
}
:deep(.arco-select-option-content) {
  display: flex;
  align-items: center;
}
.imgs {
  width: 50px;
  height: 50px;
}
#panel {
  top: 10px;
  position: absolute;
  right: 50px;
}
</style>