使用高德地图JS API 开发——点标记Marker(2)

使用高德地图JS API 开发之普通点标记Marker（2）：

官方示例 👉传送门
关于如何引入高德地图JS API方式 请移步上一篇文章👉使用高德地图JS API 开发一些常见使用方法（急救包）

高德API的点标记有默认、自定义、文本、圆形等点标记，开发上还是自定义点标记Marker使用较多，本文就只介绍自定义点标记
点标记Marker在使用上方便可以自定义icon、文本

1.创建的 Marker 指定自定义图标

const marker = new AMap.Marker({
  position: new AMap.LngLat(116.39, 39.9),
  offset: new AMap.Pixel(-10, -10),
  icon: "//vdata.amap.com/icons/b18/1/2.png", //添加 icon 图标 URL
  title: "北京",
});
map.add(marker);

2.创建的 Marker 指定 Icon 实例

//创建 AMap.Icon 实例：
const icon = new AMap.Icon({
  size: new AMap.Size(25, 34), //图标尺寸
  image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
  imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
  imageSize: new AMap.Size(135, 40), //根据所设置的大小拉伸或压缩图片
});
// 将 Icon 实例添加到 marker 上:
const marker = new AMap.Marker({
  position: new AMap.LngLat(116.35, 39.89), //点标记的位置
  offset: new AMap.Pixel(-13, -30), //偏移量
  icon: icon, //添加 Icon 实例
  title: "北京",
  zooms: [2, 12], //点标记显示的层级范围，超过范围不显示
});
map.add(marker);

3.创建的 Marker 指定自定义内容

对于更加复杂的 marker 展示，我们可以使用 AMap.Marker的content 属性。content 属性取值为用户自定义的 DOM 节点或者 DOM 节点的 HTML 片段。content 属性比 icon 属性更加灵活，设置了 content 以后会覆盖 icon 属性。

const content = `<div class="custom-content-marker">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
</div>`;
const marker = new AMap.Marker({
  content: content, //自定义点标记覆盖物内容
  position: [116.397428, 39.90923], //基点位置
  offset: new AMap.Pixel(-13, -30), //相对于基点的偏移位置
});
map.add(marker);

完整代码 👇

<!-- Vue 2 Code -->
<template>
  <div id="index" ref="appRef">
    <div id="container" ref="mapRef"></div>
  </div>
</template>
<script>
var map; // 地图加载
export default {
  name: "componentsMap",
  data() {
    return {
      data: [],
    };
  },
  created() {
    this.initData();
  },
  mounted() {
    this.$nextTick(() => this.initMap());
  },
  beforeDestroy() {
    map?.destroy();
    map = null;
  },
  methods: {
    // 模拟生成地图打点数据Array
    initData() {
      /*
       * @Author: Do not edit
       * @Date: 2024-04-22 18:40:33
       * @LastEditors: Do not edit
       * @LastEditTime: 2024-04-22 18:40:33
       * @FilePath: Do not edit
       * @Description： 模拟生成坐标点
       */
      // 限定范围
      const anhuibounds = {
        minlng: 104.032965,
        maxlng: 119.695845,
        minlat: 28.097015,
        maxlat: 36.897459,
      };
      // 生成条数
      const steps = 100;
      const generaterandomcoordinate = () => {
        // 生成随机经度
        const lng =
          anhuibounds.minlng +
          Math.random() * (anhuibounds.maxlng - anhuibounds.minlng);
        // 生成随机纬度
        const lat =
          anhuibounds.minlat +
          Math.random() * (anhuibounds.maxlat - anhuibounds.minlat);
        // 生成随机名称
        const name = "地点" + Math.floor(Math.random() * steps);
        // 获取当前时间戳
        const timestamp = Date.now();
        return { name, lng, lat, timestamp };
      };
      let array = [];
      for (let i = 0; i < steps; i++) {
        array.push(generaterandomcoordinate());
      }
      // console.log(array)
      this.data = array;
    },
    // 初始化地图
    initMap() {
      map = new window.AMap.Map("container", {
        viewMode: "2D",
        zooms: [3, 20], // 缩放范围
        terrain: false, //关闭地形图 官方效果示例https://lbs.amap.com/demo/javascript-api-v2/example/3d/3d-terrain
        showBuildingBlock: false, // 不显示3D楼块 建议使用 节省性能 看需要
        showLabel: false, // 取消地图层标注
        scrollWheel: true, // 开启缩放
        dragEnable: true, // 开启鼠标拖动
        doubleClickZoom: false, // 禁止双击
      });
      if (this.data) this.setMarker();
    },
    setMarker() {
      // 先筛选出有效数据
      const validData = this.data.filter((item) => item.lng && item.lat);

      const markers = validData.map((item) => {
        // 定义图标样式，这部分可以考虑是否需要在循环外定义以避免重复创建相同的Icon实例
        const MARKER_ICON = new window.AMap.Icon({
          image:
            "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          imageSize: new window.AMap.Size(25, 30), // 图片大小
        });

        // 创建Marker实例
        const marker = new window.AMap.Marker({
          map: map,
          title: item.name, // 直接使用name作为提示文字，提升用户体验
          position: [item.lng, item.lat],
          icon: MARKER_ICON,
          offset: new window.AMap.Pixel(0, 0),
          showPositionPoint: true,
          extData: item, // 保留原始数据以便点击事件使用
        });

        // 设置文本标签
        marker.setLabel({
          offset: new window.AMap.Pixel(0, 0), // 调整垂直偏移使标签更美观
          content: `<span style="color:#000">${item.name}</span>`,
          direction: "top",
        });

        // 绑定点击事件
        marker.on("click", this.markersClick);

        return marker;
      });

      // 批量添加Marker
      map.add(markers);
      // 自动调整地图视野以适应所有Marker
      map.setFitView();
    },
    // 点击获取当前marker点数据data[i]
    markersClick(e) {
      console.log(e.target.getExtData());
    },
  },
};
</script>
<style lang="scss"  scoped>
#index {
  width: 1920px;
  height: 1080px;
  color: #ffffff;
  overflow: hidden;
  #container {
    width: 1920px;
    height: 1080px;
    z-index: 100;
  }
}
</style>

下一篇👉: 使用高德地图JS API 开发——海量点标记LabelMarker