通过 Vue 实现地图展示与交互

通过 Vue 实现地图展示与交互

在现代 web 应用中，地图展示和交互是一个常见的需求。Vue.js 结合各种地图服务 API（如 Google Maps、Mapbox 或高德地图等）可以轻松实现这一功能。本文将介绍如何使用 Vue 和地图服务 API 实现地图展示与交互，并提供使用 setup 语法糖的示例代码。

选择地图服务

首先，你需要选择一个地图服务提供商。这里我们以高德地图（AMap）为例，因为它提供了丰富的 JavaScript API 并且有免费的使用额度。

注册高德地图开发者账号

1. 前往高德地图开放平台（https://lbs.amap.com/）注册账号。
2. 创建应用并获取 API Key。

安装高德地图 SDK

在项目中安装高德地图 SDK。

npm install @amap/amap-jsapi-loader

实现地图展示与交互

1. 导入必要的模块

import { onMounted, ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

2. 使用 setup 语法糖定义组件

<template>
  <div id="mapContainer" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

const mapContainer = ref(null);
const map = ref(null);

onMounted(() => {
  AMapLoader.load({
    key: '你的高德地图 API Key', // 替换为你的 API Key
    version: '2.0', // 指定版本号
    plugins: ['AMap.Marker', 'AMap.Polyline'] // 按需加载插件
  }).then((AMap) => {
    map.value = new AMap.Map(mapContainer.value, {
      zoom: 11, // 初始化地图缩放级别
      center: [116.397428, 39.90923], // 初始化地图中心点
    });

    // 添加标记
    const marker = new AMap.Marker({
      position: [116.397428, 39.90923],
      title: 'Hello AMap'
    });
    marker.setMap(map.value);

    // 添加线
    const polyline = new AMap.Polyline({
      path: [
        [116.403322, 39.920255],
        [116.410703, 39.897555],
        [116.402292, 39.89246],
      ],
      strokeColor: '#3366FF',
      strokeOpacity: 1,
      strokeWeight: 5,
      // strokeOpacity: 0.2,
      // strokeStyle: 'solid',
      arrowStyle: 'arrow',
      lineWidth: 10,
    });
    polyline.setMap(map.value);
  }).catch((err) => {
    console.error(err);
  });
</script>

<style>
#mapContainer {
  width: 100%;
  height: 400px;
}
</style>

在这个例子中，我们使用 AMapLoader.load 方法加载高德地图 SDK，并在地图容器中创建一个地图实例。然后，我们添加了一个标记和一个线。

总结

通过 Vue 和高德地图 SDK，你可以轻松实现地图展示与交互。使用 setup 语法糖可以简化组件的编写，使得代码更加简洁。在实际项目中，你可以根据需求添加更多的地图功能，如地图缩放、拖拽、标记点击事件等。通过这种方式，你可以为你的 Vue 应用添加丰富的地图交互功能。

---

更多面试题请点击：web前端高频面试题_在线视频教程-CSDN程序员研修院

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作