更新记录

1.0.8（2024-08-29）

修改事件名

1.0.7（2024-08-29）

修复bug

1.0.6（2024-08-29）

完善md

平台兼容性

hr-amap Vue 组件插件文档

本文档将指导您使用 hr-amap Vue 组件，该组件集成了高德地图（AMap）到您的 Vue.js 应用中。该组件设计灵活，可以通过各种属性进行自定义，包括标记、地图配置和聚类配置。

目录

• 使用
• 属性
• 事件
• 方法
• 示例

使用

在您的模板中包含 hr-amap 组件，并传递必要的属性来配置地图及其功能。

<template>
  <view class="content">
    <hr-amap
      :style="{ width: '100%', height: '500px' }"
      :longitude="mapCenter.longitude"
      :latitude="mapCenter.latitude"
      :scale="12"
      :markers="markers"
      :enable-3D="false"
      :loader-config="loaderConfig"
      :map-config="mapConfig"
      :cluster-config="clusterConfig"
      @load="handleMapLoaded"
    />
  </view>
</template>

<script>
import points from "./data.js";

export default {
  data() {
    return {
      mapCenter: {
        longitude: 112.93359937,
        latitude: 28.22375837,
      },
      loaderConfig: {
        key: "您的高德地图API密钥",
        securityJsCode: "您的安全码",
        plugins: ["AMap.MarkerCluster", "AMap.Geolocation"],
        version: "2.0",
      },
      mapConfig: {},
      clusterConfig: {
        enableDefaultStyle: false,
        zoomOnClick: true,
        gridSize: 60,
      },
      markers: points,
    };
  },
  methods: {
    handleMapLoaded(map, AMap) {
      // 添加控件
      const geolocation = new AMap.Geolocation();
      map.addControl(geolocation);
    },
  },
};
</script>

属性

• loaderConfig (Object): 高德地图 API 加载配置，包括密钥、版本、插件等。
• longitude (Number): 地图中心点的经度。
• latitude (Number): 地图中心点的纬度。
• scale (Number): 地图缩放级别。
• enable3d (Boolean): 是否启用 3D 模式。
• mapConfig (Object): 地图的其他配置选项。
• clusterConfig (Object): 聚类配置选项。
• markers (Array): 标记点数组，包含标记点的经纬度、图标、标签等信息。
• polyline (Array): 折线数组，用于绘制路径或线条。
• circles (Array): 圆形区域数组，用于标注特定区域。

事件

• load: 当地图加载完成时触发，回调参数为 (map, AMap)。

方法

• initAMap(): 初始化地图。
• removeMarkers(): 移除地图上的标记。
• markerCluster(): 使用标记点创建聚类。
• renderMarker(context): 自定义标记的渲染逻辑。

示例

下面是一个使用 hr-amap 组件的示例，展示了如何在地图上加载并显示标记：

<template>
  <view class="content">
    <hr-amap
      :style="{ width: '100%', height: '500px' }"
      :longitude="112.93359937"
      :latitude="28.22375837"
      :scale="12"
      :markers="markers"
      :enable-3D="false"
      :loader-config="loaderConfig"
      :map-config="mapConfig"
      :cluster-config="clusterConfig"
      @load="handleMapLoaded"
    />
  </view>
</template>

<script>
import points from "./data.js";

export default {
  data() {
    return {
      loaderConfig: {
        key: "您的高德地图API密钥",
        securityJsCode: "您的安全码",
        plugins: ["AMap.MarkerCluster", "AMap.Geolocation"],
        version: "2.0",
      },
      mapConfig: {},
      clusterConfig: {
        enableDefaultStyle: false,
        zoomOnClick: true,
        gridSize: 60,
      },
      markers: points,
    };
  },
  methods: {
    handleMapLoaded(map, AMap) {
      const geolocation = new AMap.Geolocation();
      map.addControl(geolocation);
    },
  },
};
</script>

data.js

export default [
  {
    joinCluster: true,
    id: 0,
    latitude: 28.260642,
    longitude: 112.568821,
    iconPath: "./static/icons/hzz/gisIcon/spjk.png",
    width: 33,
    height: 39,
    label: {
      content: "沩丰坝桥下2-四期",
      color: "#333",
      textAlign: "center",
      padding: 10,
      borderRadius: 5,
      borderWidth: 1,
      fontSize: 13,
      x: -30,
      y: 0,
      borderColor: "#fff",
      bgColor: "#fff",
    },
    callout: {
      content: "",
      textAlign: "left",
      color: "#333",
      bgColor: "#fff",
      fontSize: 12,
      padding: 10,
      borderRadius: 5,
      display: "",
    },
    lnglat: [112.568821, 28.260642],
    name: "沩丰坝桥下2-四期",
    weight: 1,
  },
  {
    joinCluster: true,
    id: 1,
    latitude: 28.264276,
    longitude: 112.567309,
    iconPath: "./static/icons/hzz/gisIcon/spjk.png",
    width: 33,
    height: 39,
    label: {
      content: "沩水河沩丰坝大桥全景-枪-四期",
      color: "#333",
      textAlign: "center",
      padding: 10,
      borderRadius: 5,
      borderWidth: 1,
      fontSize: 13,
      x: -30,
      y: 0,
      borderColor: "#fff",
      bgColor: "#fff",
    },
    callout: {
      content: "",
      textAlign: "left",
      color: "#333",
      bgColor: "#fff",
      fontSize: 12,
      padding: 10,
      borderRadius: 5,
      display: "",
    },
    lnglat: [112.567309, 28.264276],
    name: "沩水河沩丰坝大桥全景-枪-四期",
    weight: 1,
  },
];