首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 使用高德地图

如何在 vue3 中使用高德地图

2024-08-14 12:13:10 作者：yqcoder

这篇文章主要介绍了如何在 vue3 中使用高德地图,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

前言：定位地图位置所需要的经纬度，可以通过拾取坐标获取。

一：快速上手

1. 安装依赖

npm install @amap/amap-jsapi-loader
# or
pnpm add @amap/amap-jsapi-loader
# or
yarn add @amap/amap-jsapi-loader

2. 创建组件 src/components/Map.vue

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map = null;
onMounted(() => {
  AMapLoader.load({
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });
    })
    .catch((e) => {
      console.log(e);
    });
});
onUnmounted(() => {
  map?.destroy();
});
</script>
<template>
  <div id="container"></div>
</template>
<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>

3. 获取 key 值

注册高德账号，注册成功后登录，然后添加 key 值。复制添加后的 Key 值到组件，就可以使用了。

二：地图配置

参考文档地图 JS API

1. 展示地图

1.1. 加载 JS API

AMapLoader.load({
  key: "「你申请的应用key」", //申请好的Web端开发者key，调用 load 时必填
  version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
})
  .then((AMap) => {
    //JS API 加载完成后获取AMap对象
  })
  .catch((e) => {
    console.error(e); //加载错误提示
  });

1.2. 地图初始化

const map = new AMap.Map("container", {
  viewMode: "2D", //默认使用 2D 模式
  zoom: 11, //地图级别
  center: [116.397428, 39.90923], //地图中心点
});

1.3. 主题样式

通过在地图初始化时设置 mapStyle 修改主题样式，官方主题有 amap://styles/ 后面拼接：normal、grey、whitesmoke、dark、light、graffiti

map = new AMap.Map("container", {
  mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
});

2. 展示图层

2.1 创建图层

const layer = new AMap.createDefaultLayer({
  zooms: [3, 20], //可见级别
  visible: true, //是否可见
  opacity: 1, //透明度
  zIndex: 0, //叠加层级
});

2.2 加载图层

const map = new AMap.Map("container", {
  viewMode: "2D", //默认使用 2D 模式
  zoom: 11, //地图级别
  center: [116.397428, 39.90923], //地图中心点
  layers: [layer], //layer为创建的默认图层
});

2.3 创建实时交通路况图层

const traffic = new AMap.TileLayer.Traffic({
  autoRefresh: true, //是否自动刷新，默认为false
  interval: 180, //刷新间隔，默认180s
});
map.add(traffic); //通过add方法添加图层

2.4 路况图层的显示和隐藏

traffic.show(); //显示路况图层
traffic.hide(); //隐藏路况图层

3. 添加地图控件

JS API 提供了众多的控件，需要引入之后才能使用这些控件的功能。常见的地图控件有：缩放工具条 ToolBar、比例尺 Scale、定位按钮 Geolocation 等。

3.1 引入地图控件

//异步加载控件
AMap.plugin("AMap.ToolBar", function () {
  var toolbar = new AMap.ToolBar(); //缩放工具条实例化
  map.addControl(toolbar);
});

3.2 控制地图控件显示/隐藏

toolbar.show(); //缩放工具展示
toolbar.hide(); //缩放工具隐藏

4. 添加点标记

点标记是地图覆盖物中非常重要的要素之一，可以用来标记地图上的某个位置。

4.1 自定义 Marker

自定义 Marker 内容可以是字符串拼接的 DOM 元素。可以根据 class 名去定义样式。

//点标记显示内容
const markerContent = `<div class="custom-content-marker">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
<div class="close-btn" onclick="clearMarker()">X</div>
</div>`;

4.2 创建 Marker 对象

const position = new AMap.LngLat(116.397428, 39.90923); //Marker 经纬度
const marker = new AMap.Marker({
  position: position,
  content: markerContent, //将 html 传给 content
  offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
});

4.3 将 Marker 添加到地图

map.add(marker);

4.4 给 Marker 绑定事件

function clearMarker() {
  map.remove(marker); //清除 marker
}
document.querySelector(".close-btn").onclick = clearMarker; //绑定点击事件

5. 添加多边形

多边形矢量图是地图覆盖物重要的地图要素之一，可以用来突出标记某个区域的形状。

5.1 创建地图

const map = new AMap.Map("container", {
  center: [121.045332, 31.19884], //地图中心点
  zoom: 8.8, //地图级别
});

5.2 创建 Polygon 对象

AMap.Polygon 对象为用户提供在地图图面绘制多边形的能力。可以为多边形设置填充颜色 fillColor、描边颜色 strokeColor、轮廓线样式等属性。

tips: path 是多边形轮廓线的节点坐标数组。多边形支持普通多边形，带单个孔多边形，带多个孔多边形类型绘制。

普通多边形：path = [lnglat, lnglat ...] 或 path = [[lnglat, lnglat ...]]
带单个孔多边形：path = [[lnglat, lnglat ...], [ lnglat, lnglat ...]]
带多个孔多边形：path = [[lnglat, lnglat ...], [lnglat, lnglat ... ], [lnglat, lnglat ...] ...]

const pathArr = [
  [
    [
      [121.7789, 31.3102],
      [121.7279, 31.3548],
      [121.5723, 31.4361],
      [121.5093, 31.4898],
      [121.5624, 31.4864],
      [121.5856, 31.4547],
      [121.7694, 31.3907],
      [121.796, 31.3456],
      [121.7789, 31.3102],
    ],
  ],
];
const polygon = new AMap.Polygon({
  path: pathArr, //多边形路径
  fillColor: "#ccebc5", //多边形填充颜色
  strokeOpacity: 1, //线条透明度
  fillOpacity: 0.5, //填充透明度
  strokeColor: "#2b8cbe", //线条颜色
  strokeWeight: 1, //线条宽度
  strokeStyle: "dashed", //线样式
  strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式
});

5.3 给 Polygon 添加事件

//鼠标移入更改样式
polygon.on("mouseover", () => {
  polygon.setOptions({
    fillOpacity: 0.7, //多边形填充透明度
    fillColor: "#7bccc4",
  });
});
//鼠标移出恢复样式
polygon.on("mouseout", () => {
  polygon.setOptions({
    fillOpacity: 0.5,
    fillColor: "#ccebc5",
  });
});

5.4 添加 Polygon 到地图

map.add(polygon);

6. 搜索地点

AMap.PlaceSearch 地点搜索插件。

6.1 创建地图

const map = new AMap.Map("container", {
  viewMode: "2D", //默认使用 2D 模式
  zoom: 11, //地图级别
  center: [116.397428, 39.90923], //地图中心点
});

6.2 引入插件

通过 AMap.plugin 方法按需引入插件

AMap.plugin(["AMap.PlaceSearch"], function () {
  const placeSearch = new AMap.PlaceSearch({
    pageSize: 5, //单页显示结果条数
    pageIndex: 1, //页码
    city: "010", //兴趣点城市
    citylimit: true, //是否强制限制在设置的城市内搜索
    map: map, //展现结果的地图实例
    panel: "my-panel", //结果列表将在此容器中进行展示。
    autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
  });
  placeSearch.search("北京大学"); //使用插件搜索关键字并查看结果
});

6.3 自定义搜索结果

如果不想使用 JS API 的结果面板，panel 可以缺省或者赋值 false，然后在 search()的回调中处理自己的逻辑，自定义搜索教程前往输入提示与 POI 搜索。

//在回调函数中使用插件功能
placeSearch.search("北京大学", function (status, result) {
  //查询成功时，result 即对应匹配的 POI 信息
});

7. 路线规划

AMap.Driving 驾车路线规划插件。JS API 的路线规划种类有：驾车 AMap.Driving、公交 AMap.Transfer、步行 AMap.Walking、骑乘 AMap.Riding 和货车 AMap.TruckDriving 等。

7.1 确认规划的起点和终点信息

// 使用地名确认起终点
const points = [
  { keyword: "北京市地震局（公交站）", city: "北京" }, //起始点坐标
  { keyword: "亦庄文化园（地铁站）", city: "北京" }, //终点坐标
];
// 使用经纬度确认起终点
const startLngLat = [116.379028, 39.865042]; //起始点坐标
const endLngLat = [116.427281, 39.903719]; //终点坐标

7.2 引入和创建驾车规划插件，获取起终点规划线路

// 使用地点名称规划获取规划路线
// 引入和创建驾车规划插件
AMap.plugin(["AMap.Driving"], function () {
  const driving = new AMap.Driving({
    map: map,
    panel: "my-panel",
  });
  //获取起终点规划线路
  driving.search(points, function (status, result) {
    if (status === "complete") {
      //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
      //查询成功时，result 即为对应的驾车导航信息
      console.log(result);
    } else {
      console.log("获取驾车数据失败：" + result);
    }
  });
});
// 使用经纬度规划获取规划路线
// 引入和创建驾车规划插件
AMap.plugin(["AMap.Driving"], function () {
  const driving = new AMap.Driving({
    map: map,
    panel: "my-panel",
  });
  //获取起终点规划线路
  driving.search(startLngLat, endLngLat, function (status, result) {
    if (status === "complete") {
      //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
      //查询成功时，result 即为对应的驾车导航信息
      console.log(result);
    } else {
      console.log("获取驾车数据失败：" + result);
    }
  });
});

8. 地图生命周期

8.1 创建地图

var map = new AMap.Map("container", {
  zoom: 10, //地图级别
  center: [116.397428, 39.90923], //地图中心点
  layers: [new AMap.TileLayer.Satellite()], //设置图层,可设置成包含一个或多个图层的数组
  mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
  viewMode: "2D", //设置地图模式
});

8.2 地图加载完成

map.on("complete", function () {
  //地图图块加载完成后触发
});

8.3 地图运行阶段

var map = new AMap.Map("container"); //初始化地图
//在运行阶段添加点标记
const marker = new AMap.Marker({
  position: new AMap.LngLat(116.39, 39.9),
});
//将创建的点标记添加到已有的地图实例：
map.add(marker);
//在运行阶段监听地图的点击事件
const clickHandler = function (e) {
  console.log(
    "您在[ " +
      e.lnglat.getLng() +
      "," +
      e.lnglat.getLat() +
      " ]的位置点击了地图！"
  );
};
map.on("click", clickHandler);

8.4 销毁地图对象

//解绑地图的点击事件
map.off("click", clickHandler);
//销毁地图，并清空地图容器
map.destroy();
//地图对象赋值为null
map = null;
//清除地图容器的 DOM 元素
document.getElementById("container").remove(); //"container" 为指定 DOM 元素的id

到此这篇关于在 vue3 中使用高德地图的文章就介绍到这了,更多相关vue3 使用高德地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！