返回

Vue 高德地图初体验：鼠标点击标记点、POI搜索、定制路线规划

前端

使用 Vue 高德地图打造地图标记、搜索和路线规划应用

准备踏入地理位置信息丰富的应用程序的世界吧！借助 Vue 高德地图 API 的强大功能，您将能够在您的 Vue.js 项目中轻松实现地图标记、POI 搜索和驾车路线规划。准备好在您的地图上添加动态元素，提升您的用户体验了吗？

一、踏上旅程：准备工作

  1. 安装 Vue 高德地图 API： 使用 npm install @amap/amap-jsapi-loader --save 安装 API。

  2. 导入 API： 在您的 Vue.js 项目中，使用 import VueAMap from '@amap/amap-jsapi-loader'; Vue.use(VueAMap); 导入 API。

  3. 创建地图实例： 创建一个新的地图实例，如下所示：

export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new AMap.Map('map', {
        zoom: 11,
        center: [121.491316, 31.234749]
      });
    }
  }
}

二、点亮地图：添加标记点

  1. 单击地图添加标记点：
this.map.on('click', (e) => {
  // 创建标记点
  const marker = new AMap.Marker({
    position: [e.lnglat.getLng(), e.lnglat.getLat()]
  });
  // 将标记点添加到地图中
  this.map.add(marker);
});
  1. 自定义标记点图标：
// 自定义标记点图标
const icon = new AMap.Icon({
  image: 'path/to/icon.png',
  size: new AMap.Size(32, 32)
});
// 创建标记点
const marker = new AMap.Marker({
  position: [121.491316, 31.234749],
  icon: icon
});
// 将标记点添加到地图中
this.map.add(marker);

三、探索兴趣点：POI 搜索

  1. POI 搜索：
// 创建 POI 查询对象
const query = new AMap.PlaceSearch({
  keyword: '餐厅',
  city: '上海'
});
// 发起 POI 查询请求
query.search((status, result) => {
  if (status === 'complete') {
    // POI 查询成功
    const pois = result.poiList.pois;
    // 在地图上标记 POI
    for (let i = 0; i < pois.length; i++) {
      const marker = new AMap.Marker({
        position: [pois[i].location.lng, pois[i].location.lat]
      });
      this.map.add(marker);
    }
  }
});
  1. POI 详情页跳转：
query.search((status, result) => {
  if (status === 'complete') {
    // POI 查询成功
    const pois = result.poiList.pois;
    // 创建 POI 详情页跳转链接
    const url = `https://www.amap.com/detail?id=${pois[0].id}`;
    // 打开 POI 详情页
    window.open(url);
  }
});

四、畅游城市：驾车路线规划

  1. 驾车路线规划：
// 创建驾车路线规划对象
const driving = new AMap.Driving({
  map: this.map
});
// 设置驾车路线规划起点和终点
driving.search([
  {keyword: '上海火车站'},
  {keyword: '浦东机场'}
], (status, result) => {
  if (status === 'complete') {
    // 驾车路线规划成功
    const route = result.routes[0];
    // 在地图上绘制驾车路线
    driving.show(route);
  }
});
  1. 自定义驾车路线规划途经点：
// 设置驾车路线规划途经点
driving.search([
  {keyword: '上海火车站'},
  {keyword: '南京路步行街'},
  {keyword: '浦东机场'}
], (status, result) => {
  if (status === 'complete') {
    // 驾车路线规划成功
    const route = result.routes[0];
    // 在地图上绘制驾车路线
    driving.show(route);
  }
});

结论：地图无限可能

Vue 高德地图 API 将为您打开地图应用程序开发的大门。无论是标记 POI、探索兴趣点，还是规划路线，这款强大的工具都将助您一臂之力。使用本指南提供的示例，您已掌握了地图标记、搜索和路线规划的基本知识，现在您可以放飞想象力，打造出令人惊叹的地图应用程序。

常见问题解答

1. 如何使用自定义图标替换地图标记的默认图标？

// 自定义标记点图标
const icon = new AMap.Icon({
  image: 'path/to/icon.png',
  size: new AMap.Size(32, 32)
});
// 创建标记点
const marker = new AMap.Marker({
  position: [121.491316, 31.234749],
  icon: icon
});
// 将标记点添加到地图中
this.map.add(marker);

2. 如何在地图上搜索特定类型的 POI，例如餐厅？

// 创建 POI 查询对象
const query = new AMap.PlaceSearch({
  keyword: '餐厅',
  city: '上海'
});
// 发起 POI 查询请求
query.search((status, result) => {
  if (status === 'complete') {
    // POI 查询成功
    const pois = result.poiList.pois;
    // 在地图上标记 POI
    for (let i = 0; i < pois.length; i++) {
      const marker = new AMap.Marker({
        position: [pois[i].location.lng, pois[i].location.lat]
      });
      this.map.add(marker);
    }
  }
});

3. 如何在驾车路线规划中添加途经点？

// 设置驾车路线规划途经点
driving.search([
  {keyword: '上海火车站'},
  {keyword: '南京路步行街'},
  {keyword: '浦东机场'}
], (status, result) => {
  if (status === 'complete') {
    // 驾车路线规划成功
    const route = result.routes[0];
    // 在地图上绘制驾车路线
    driving.show(route);
  }
});

4. 如何在地图上添加多个标记点？

// 创建多个标记点
const markers = [];
for (let i = 0; i < 10; i++) {
  const marker = new AMap.Marker({
    position: [121.491316 + i, 31.234749 + i]
  });
  markers.push(marker);
}
// 将标记点添加到地图中
this.map.add(markers);

5. 如何在地图上放大或缩小？

// 放大地图
this.map.zoomIn();
// 缩小地图
this.map.zoomOut();