Vue 高德地图（vue-amap）的基本使用：添加标记、POI关键字搜索、路线规划...(方法二)

胡萝卜糊了
2,370 阅读2分钟

@[TOC](高德地图 Vue-amap)

前言： 引入并初始化渲染地图

具体的步骤可以参考我的上一篇博客，有详细说明如何注册申请高德的Key、秘钥，初始化地图等等

Vue-高德地图的基本使用（@amap/amap-jsapi-loader））： vue-高德地图的基本使用

** 官方文档地址：** 具体的ApI可查看官方文档说明 ： 高德地图 JS API 示例 高德官方介绍：地图 JS API

1、安装依赖

npm install vue-amap --save

2、统一配置地图基础配置（版本、秘钥等）

在plugins文件下下建一个aMap.js

import Vue from "vue";
// 高德离线地图
import VueAMap from "vue-amap";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  // 高德key
  key: "XXXXX", //  申请好的Web端开发者Key
  // 插件集合 （插件按需引入）
  plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"],
  v: "2.0", // 版本
  uiVersion: "1.0.11", // ui版本号
});

3、页面引入aMap.js，初始化渲染

1、html 需要一个地图容器

<template>
  <div class="amap-wrap">
    <div class="search-box">
      <div class="label">关键字搜索</div>
      <el-input v-model="input" placeholder="关键字搜索" id="tipinput"></el-input>
      <el-button size="mini" type="primary" @click="searchMap">搜索</el-button>
    </div>
    <el-amap vid="amapContainer" :zoom="zoom" :events="events" class="amap-demo"></el-amap>
    <div id="panel" />
  </div>
</template>

2、引入@/plugins/aMap.js、 vue-amap

import "@/plugins/aMap.js";
import { lazyAMapApiLoaderInstance } from "vue-amap";

3、初始化地图Map

 mounted() {
   this.initMap();
 },
  ....
 initMap() {
    lazyAMapApiLoaderInstance.load().then(() => {
      this.map = new AMap.Map("amapContainer", {
        center: new AMap.LngLat(114.268691, 30.401227),
        zoom: this.zoom,
      });
      // 设置标记
      this.setMarker([114.26603, 30.397081]);
      // 监听鼠标点击事件
      this.map.on("click", this.clickMapHandler);
      //调用驾车规划功能
      this.drivingMap();
    });
 },

4、 常用那个方法

4.1 添加标记、 移除标记点

markers.png

 //  添加标记
 setMarker(lnglat) {
   this.removeMarker();
   console.log("位置", lnglat);
   let marker = new AMap.Marker({
     position: lnglat,
   });
   marker.setMap(this.map);
   this.markers.push(marker);
 },
 // 删除之前后的标记点
 removeMarker() {
   if (this.markers) {
     this.map.remove(this.markers);
   }
 },

4.2 搜索服务

Snipaste_2022-09-26_17-21-21.png

// POI关键字搜索
searchMap() {
  var placeSearch = new AMap.PlaceSearch({
    // 构造地点查询类
    pageSize: 5, // 单页显示结果条数
    pageIndex: 1, // 页码
    citylimit: true, // 是否强制限制在设置的城市内搜索
    map: this.map, // 展现结果的地图实例
    panel: "panel", // 结果列表将在此容器中进行展示。
    autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
  });
  // 关键字查询
  placeSearch.search(this.input, (status, result) => {
    // 查询成功时，result即对应匹配的POI信息
    console.log(status, result);
  });
  // 监听选中节点事件
  AMap.event.addListener(placeSearch, "selectChanged", (SelectChangeEvent) => {
    // 获取节点信息自行处理逻辑代码
    this.mark = SelectChangeEvent.selected.data;
  });
},

4.3 驾车路线规划服务

Snipaste_2022-09-26_17-23-19.png

// 路线规划服务 
drivingMap() {
  AMap.plugin("AMap.Driving", () => {
    var driving = new AMap.Driving({
      // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
      policy: AMap.DrivingPolicy.LEAST_TIME,
      map: this.map, //绑定地图组件
    });
    //构造路线导航类
    var driving = new AMap.Driving({
      map: this.map,
      panel: "panel",// 线路提示显示在id为panel的容器里
    });
    //创建搜索的路线  传入要规划的坐标点
    driving.search(
      new AMap.LngLat(114.332138, 30.53802),
      new AMap.LngLat(114.308783, 30.560878),
      {
        waypoints: [new AMap.LngLat(114.317433, 30.55351)], //途经点
      },
      function (status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === "complete") {
          // log.success('绘制驾车路线完成')
        } else {
          // log.error('获取驾车数据失败：' + result)
        }
      }
    );
  });
},

5、完整代码

<template>
  <div class="amap-wrap">
    <div class="search-box">
      <div class="label">关键字搜索</div>
      <el-input v-model="input" placeholder="关键字搜索" id="tipinput"></el-input>
      <el-button size="mini" type="primary" @click="searchMap">搜索</el-button>
    </div>
    <el-amap vid="amapContainer" :zoom="zoom" :events="events" class="amap-demo"></el-amap>
    <div id="panel" />
  </div>
</template>

<script>
import "@/plugins/aMap.js";
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  name: "amapMap",
  data() {
    return {
      input: "",
      map: null,
      zoom: 13,
      events: {},
      markers: [],
      mark: "",
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      lazyAMapApiLoaderInstance.load().then(() => {
        this.map = new AMap.Map("amapContainer", {
          center: new AMap.LngLat(114.268691, 30.401227),
          zoom: this.zoom,
        });
        // 设置标记
        this.setMarker([114.26603, 30.397081]);
        // 监听鼠标点击事件
        this.map.on("click", this.clickMapHandler);

        //调用驾车规划功能
        this.drivingMap();
      });
    },

    // 点击地图事件
    clickMapHandler(e) {
      this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.setMarker(this.lnglat);
    },
    //  添加标记
    setMarker(lnglat) {
      this.removeMarker();
      console.log("位置", lnglat);
      let marker = new AMap.Marker({
        position: lnglat,
      });
      marker.setMap(this.map);
      this.markers.push(marker);
    },
    // 删除之前后的标记点
    removeMarker() {
      if (this.markers) {
        this.map.remove(this.markers);
      }
    },
    // 关键字查询
    searchMap() {
      var placeSearch = new AMap.PlaceSearch({
        // 构造地点查询类
        pageSize: 5, // 单页显示结果条数
        pageIndex: 1, // 页码
        citylimit: true, // 是否强制限制在设置的城市内搜索
        map: this.map, // 展现结果的地图实例
        panel: "panel", // 结果列表将在此容器中进行展示。
        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
      });
      // 关键字查询
      placeSearch.search(this.input, (status, result) => {
        // 查询成功时，result即对应匹配的POI信息
        console.log(status, result);
      });
      // 监听选中节点事件
      AMap.event.addListener(placeSearch, "selectChanged", (SelectChangeEvent) => {
        // 获取节点信息自行处理逻辑代码
        this.mark = SelectChangeEvent.selected.data;
      });
    },
    // 构造路线导航类
    drivingMap() {
      AMap.plugin("AMap.Driving", () => {
        var driving = new AMap.Driving({
          // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
          policy: AMap.DrivingPolicy.LEAST_TIME,
          map: this.map, //绑定地图组件
        });
        //构造路线导航类
        var driving = new AMap.Driving({
          map: this.map,
          // panel: "panel",
        });
        //创建搜索的路线  传入要规划的坐标点
        driving.search(
          new AMap.LngLat(114.332138, 30.53802),
          new AMap.LngLat(114.308783, 30.560878),
          {
            waypoints: [new AMap.LngLat(114.317433, 30.55351)], //途经点
          },
          function (status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === "complete") {
              // log.success('绘制驾车路线完成')
            } else {
              // log.error('获取驾车数据失败：' + result)
            }
          }
        );
      });
    },
  },
};
</script>
<style lang="less" scoped>
.amap-wrap {
  position: relative;
  height: 100%;
}
.amap-demo {
  height: 800px;
}
.search-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60px;
  position: absolute;
  width: 400px;
  top: 10px;
  right: 10px;
  z-index: 999;
  background-color: #fff;
  padding: 0 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  .label {
    width: 150px;
  }
  .el-button {
    margin-left: 15px;
  }
}
#panel {
  position: absolute;
  top: 75px;
  right: 10px;
  width: 400px;
  height: 600px;
}
</style>
avatar
文章
阅读
粉丝