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

news2025/7/10 12:21:39

高德地图的基本事件与使用

  • 前言： 引入并初始化渲染地图
  • 1、初始化地图
  • 2、地图鼠标点击事件
  • 3、添加标记、 移除标记点
  • 4、搜索服务——POI关键字搜索 [AMap.PlaceSearch]
  • 5、驾车路线规划服务
    • 5.1 可拖拽驾车路线规划 [AMap.DragRoute]
    • 5.2 途经点 （起点 终点 途经点 ）路线规划 [AMap.Driving]
    • 5.3 位置经纬度 + 获取驾车规划数据 [AMap.Driving]
    • 5.4 规划结果 + 驾车路线绘制 [AMap.Driving]
  • 完整代码：

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

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

vue-amap ： vue-amap 基于 Vue 2.x 与高德的地图组件

高德官方介绍：地图 JS API

Web服务API简介

高德Web服务API向开发者提供HTTP接口，开发者可通过这些接口使用各类型的地理数据服务，返回结果支持JSON和XML格式。Web服务API对所有用户开放。使用本组服务之前，需要申请应用Key。不同类型用户可获取不同的数据访问能力。

1、初始化地图

npm i @amap/amap-jsapi-loader --save

 <el-input v-model="location" id="tipinput"></el-input>
 <div id="map-container"></div>

 data() {
    return {
      location: "", // input的内容
      map: null,// 
      lnglat: [], // 经纬度数组 [lng,lat] 
      auto: null,
      placeSearch: null,
      markers: [],
      driving: null,
    };
  },

initMap() {
  AMapLoader.load({
    key: "XXXXXX", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"],
  })
    .then((AMap) => {
      this.map = new AMap.Map("map-container", {
        // 设置地图容器id
        viewMode: "2D", //  是否为3D地图模式
        zoom: 13, // 初始化地图级别
        center: [114.268691, 30.401227], //中心点坐标
        resizeEnable: true,
      });=
      // 监听鼠标点击事件
      this.map.on("click", this.clickMapHandler);
      // 函数调用（写入你先所需要的事件函数）
      // this.searchMap(); // POI关键字搜索
      // ...其他
    })
    .catch((e) => {
      console.log(e);
   });
}，

2、地图鼠标点击事件

// 监听地图点击事件
 this.map.on("click", this.clickMapHandler);

// 点击地图事件获取经纬度，并添加标记
clickMapHandler(e) {
   this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
   this.setMarker(this.lnglat);
},

3、添加标记、 移除标记点

在这里插入图片描述

//  添加标记
setMarker(lnglat) {
  console.log("位置", lnglat); // lnglat=[经度,纬度]
  let marker = new AMap.Marker({
    position: lnglat,
  });
  marker.setMap(this.map);
  this.markers.push(marker); // 在data中记录标记点
},
// 删除之前后的标记点
removeMarker() {
// 判断是否存被标记的点，有--->移除
  if (this.markers) {
    this.map.remove(this.markers);
  }
},

4、搜索服务——POI关键字搜索 [AMap.PlaceSearch]

在这里插入图片描述

添加插件：

 plugins: [... ,  "AMap.PlaceSearch"],

// 地图关键字查询
searchMap() {
  // 搜索框自动完成类
  this.auto = new AMap.AutoComplete({
    input: "tipinput",
  });
  //构造地点查询类
  this.placeSearch = new AMap.PlaceSearch({
    map: this.map,
  });
  // 当选中某条搜索记录时触发
  this.auto.on("select", this.selectSite);
},

//当选中某条搜索记录时触发
selectSite(e) {
  this.lnglat = [e.poi.location.lng, e.poi.location.lat];
  this.placeSearch.setCity(e.poi.adcode);
  this.placeSearch.search(e.poi.name); 
},

5、驾车路线规划服务

在这里插入图片描述

5.1 可拖拽驾车路线规划 [AMap.DragRoute]

添加插件：

  plugins: [... , "AMap.DragRoute"],

// 绘制初始路径
 mapDragRoute() {
   var path = [];
   path.push([114.332138, 30.53802]);
   path.push([114.317433, 30.55351]);
   path.push([114.308783, 30.560878]);
   mapDragRoute;
   var route = new AMap.DragRoute(this.map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
   route.search(); //查询导航路径并开启拖拽导航
 },

5.2 途经点 （起点 终点 途经点 ）路线规划 [AMap.Driving]

添加插件：

  plugins: [... , "AMap.Driving"],

drivingMap() {
  var driving = new AMap.Driving({
    map: 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);
      }
    });

5.3 位置经纬度 + 获取驾车规划数据 [AMap.Driving]

  1. 准备一个panel div容器，放置导航数据，绑定一个唯一的ID
 <div id="panel"></div>
  1. 构造路线导航类，据起终点经纬度规划驾车导航路线

在这里插入图片描述

drivingMapPanle() {
  //  配置参数
  var drivingOption = {
    policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
    ferry: 1, // 是否可以使用轮渡
    // province: "鄂", // 车牌省份的汉字缩写
    map: this.map,
    panel: "panel", // 绑定容器 id
  };
  // 构造路线导航类
  var driving = new AMap.Driving(drivingOption);
  // 根据起终点经纬度规划驾车导航路线
  ver start = new AMap.LngLat(116.379028, 39.865042)
  var end = new AMap.LngLat(116.427281, 39.903719)
  driving.search(start , end , function (status, result) {
    if (status === "complete") {
      console.log("绘制驾车路线完成");
    } else {
      console.log("获取驾车数据失败：" + result);
    }
  });
},

5.4 规划结果 + 驾车路线绘制 [AMap.Driving]

添加插件：

 plugins: [... , "AMap.Driving"],

drivingMap2() {
  let that = this;
  var driving = new AMap.Driving({
    // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式,还有其他几种方式见Api文档
    policy: AMap.DrivingPolicy.LEAST_TIME,
  });
  //起、终点
  var start_xy = new AMap.LngLat(116.379028, 39.865042); // 起点的经纬度
  var end_xy = new AMap.LngLat(116.427281, 39.903719); // 终点的经纬度
  // 根据起终点经纬度规划驾车导航路线
  driving.search(start_xy, end_xy, function (status, result) {
    console.log(start_xy, end_xy, status, result);
    if (status === "complete") {
      if (result.routes && result.routes.length) {
        console.log(result.routes[0]);
         // 绘制第一条路线，也可以按需求绘制其它几条路线
        var path = that.parseRouteToPath(result.routes[0]);
        var startMarker = new AMap.Marker({
          position: path[0],
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
          map: that.map,
        });
        var endMarker = new AMap.Marker({
          position: path[path.length - 1],
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
          map: that.map,
        });
        var routeLine = new AMap.Polyline({
          path: path,
          isOutline: true,
          outlineColor: "#ffeeee",
          borderWeight: 2,
          strokeWeight: 5,
          strokeColor: "#0091ff",
          lineJoin: "round",
        });
        routeLine.setMap(that.map);
        // 调整视野达到最佳显示区域
        that.map.setFitView([startMarker, endMarker, routeLine]);
        console.log("绘制驾车路线完成");
      }
    } else {
      console.log("获取驾车数据失败：" + result);
    }
  });
},

完整代码：

<template>
  <div class="content">
    <div class="search-box">
      <div class="label">关键字搜索</div>
      <el-input v-model="input" placeholder="请输入内容" id="tipinput"></el-input>
    </div>
    <div id="map-container"></div>
    <div id="panel"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  // 设置安全密钥
  securityJsCode: "XXXXX",
};

export default {
  props: {
    iptId: {
      type: String,
    },
  },
  data() {
    return {
      input: "",
      map: null,
      lnglat: [], // [lng,lat]  [longitude,latitude]
      auto: null,
      placeSearch: null,
      markers: [],
      driving: null,
        };
  },
  mounted() {
    this.initMap();
  },
  created() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "99d901020b4dcf6b08aa3bcdb4ab386d", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"],
      })
        .then((AMap) => {
          console.log(AMap);
          this.map = new AMap.Map("map-container", {
            // 设置地图容器id
            viewMode: "2D", //  是否为3D地图模式
            zoom: 13, // 初始化地图级别
             center: [114.268691, 30.401227], //中心点坐标
            resizeEnable: true,
          });
          //规划结果 + 驾车路线绘制
          //   this.drivingMap();
          //  可拖拽驾车路线规划 绘制初始路径
          //   this.mapDragRoute();
          this.drivingMapPanle();
          // 关键字查询
          this.searchMap();
          // 监听鼠标点击事件
          this.map.on("click", this.clickMapHandler);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 绘制初始路径
    mapDragRoute() {
      var path = [];
      path.push([114.332138, 30.53802]);
      path.push([114.317433, 30.55351]);
      path.push([114.308783, 30.560878]);

      var route = new AMap.DragRoute(this.map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
      route.search(); //查询导航路径并开启拖拽导航
    },
    drivingMap() {
      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") {
            console.log("绘制驾车路线完成");
          } else {
            console.log("获取驾车数据失败：" + result);
          }
        });
     },
    drivingMapPanle() {
      // 配置参数
      var drivingOption = {
        policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
        ferry: 1, // 是否可以使用轮渡
        // province: "京", // 车牌省份的汉字缩写
        map: this.map,
        panel: "panel",
      };
      // 构造路线导航类
      var driving = new AMap.Driving(drivingOption);
      // 根据起终点经纬度规划驾车导航路线
      driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function (status, result) {
         if (status === "complete") {
          log.success("绘制驾车路线完成");
        } else {
          log.error("获取驾车数据失败：" + result);
        }
      });
    },
    // 点击地图事件
    clickMapHandler(e) {
      this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.setMarker(this.lnglat);
    },
    // 关键字查询
    searchMap() {
      // 搜索框自动完成类
      this.auto = new AMap.AutoComplete({
        input: "tipinput", // 使用联想输入的input的id
      });
      //构造地点查询类
      this.placeSearch = new AMap.PlaceSearch({
        map: this.map,
      });
      // 当选中某条搜索记录时触发
      this.auto.on("select", this.selectSite);
    },
    //当选中某条搜索记录时触发
    selectSite(e) {
      console.log("e", e);
      this.lnglat = [e.poi.location.lng, e.poi.location.lat];
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name); //关键字查询
    },
     //  添加标记
    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);
      }
    },
 },
};
</script>

<style lang="less" scoped>
.search-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
  .label {
    width: 100px;
  }
}
.content {
  position: relative;
}
#panel {
  position: absolute;
  top: 50px;
  right: 20px;
}
#map-container {
  overflow: hidden;
  width: 100%;
  height: 800px;
  margin: 0;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/406585.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

在vue3+ts项目里使用query和params传参

在vue3+ts项目里使用query和params传参

一 query 传参 &#xff08;类似get请求&#xff09; query 传参方式① 传递方组件 home.vue <template><div classc><p>query传参</p><el-button type"success" click"toList"> to list</el-button> </div>…
阅读更多...
LayUI框架的使用步骤实现登录页面

LayUI框架的使用步骤实现登录页面

目录 一、LayUI的简介 二、下载安装 三、引入并且测试 四、自定义模块 四、利用LayUI实现一个登录页面 一、LayUI的简介 1.1 什么是LayUI&#xff1f; Layui&#xff08;谐音&#xff1a;类 UI) 是一套开源的 Web UI 解决方案&#xff1b; 由国人开发&#xff08;作者贤心…
阅读更多...
Python人脸识别

Python人脸识别

#头文件&#xff1a;import cv2 as cvimport numpy as npimport osfrom PIL import Imageimport xlsxwriterimport psutilimport time#人脸录入def get_image_name(name):name_map {f.split(.)[1]:int(f.split(.)[0]) for f in os.listdir("./picture")}if not name…
阅读更多...
宇宙最强-GPT-4 横空出世：最先进、更安全、更有用

宇宙最强-GPT-4 横空出世：最先进、更安全、更有用

文章目录前言一、准确性提升1.创造力2.视觉输入3.更长的上下文二、相比于ChatGPT有哪些提升1.GPT-4 的高级推理能力超越了 ChatGPT2.GPT-4 在多种测试考试中均优于 ChatGPT。三、研究团队在GPT-4模型都做了哪些改善1.遵循 GPT、GPT-2 和 GPT-3 的研究路径2.我们花了 6 个月的时…
阅读更多...
2022年Web前端开发流程和学习路线（详尽版）

2022年Web前端开发流程和学习路线（详尽版）

前言 前端侧重于人机交互和用户体验&#xff0c;后端侧重于业务逻辑和大规模数据处理。理论上&#xff0c;面向用户的产品里&#xff0c;所有问题&#xff08;包括产品、设计、后端、甚至看不见的问题&#xff09;的表现形式&#xff0c;都会暴露在前端&#xff0c;而只有部分…
阅读更多...
JS防抖和节流

JS防抖和节流

前言 在进行窗口的操作或者输入框操作时&#xff0c;如果事件处理函数用的频率无限制&#xff0c;会加重浏览器和服务器的负担&#xff0c;此时我们就可以用防抖&#xff08;debounce&#xff09;和节流&#xff08;throttle&#xff09;的方式来减少调用频率&#xff0c;同时…
阅读更多...
简析强制缓存和协商缓存

简析强制缓存和协商缓存

零、目录 背景介绍 http 缓存机制 使用小结 一、 背景介绍 浏览器和服务器进行交互的过程&#xff0c; 时间开销的瓶颈往往出现在数据的传输的过程之中。 这个场景类似介于 A城 到 B城 之间只有一座 “通道” &#xff0c; 每次想从A城 到 B城 &#xff0c;必须按照人数交付高…
阅读更多...
Maven使用教程（IDEA版）

Maven使用教程（IDEA版）

目录 一、Maven简介 1.1 在项目中如何导入jar包&#xff1f; 1.2 传统导入jar包的方式存在什么问题&#xff1f; 1.3 项目生命周期 1.4 Maven简介 二、Maven安装及配置 2.1 Maven下载 2.2 Maven安装 2.3 配置环境变量 三、Maven的项目结构 3.1 Maven的项目结构 3.2…
阅读更多...
【CSS】CSS 特性 ③ ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

【CSS】CSS 特性 ③ ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

文章目录一、CSS 优先级1、优先级引入2、选择器基本权重3、完整代码示例一、CSS 优先级 1、优先级引入 定义 CSS 样式时 , 可能出现 多个 类型相同的 规则 定义在 同一个元素上 , 如果 CSS 选择器 相同 , 执行 CSS 层叠性 , 根据 就近原则 选择执行的样式 , 如 : 出现两个 div…
阅读更多...
VueX使用

VueX使用

vuex基本概念 vuex官方文档 vuex是vue的状态管理工具&#xff0c;状态即数据。 状态管理就是集中管理vue中 通用的 一些数据 注意&#xff08;官方原文&#xff09;&#xff1a; 不是所有的场景都适用于vuex&#xff0c;只有在必要的时候才使用vuex 使用了vuex之后&#xf…
阅读更多...
手机解锁方法：8个顶级的 Android 手机解锁软件

手机解锁方法：8个顶级的 Android 手机解锁软件

一般来说&#xff0c;太简单的密码是不安全的&#xff0c;所以我们设置一个安全的密码&#xff0c;可能会稍微复杂一点。然而&#xff0c;我们可能经常会忘记复杂的密码并锁定我们的 Android 智能手机。 8个顶级的 Android 手机解锁软件 如果您遇到过这种情况并且正在寻找一种…
阅读更多...
【vue2】vue全家桶介绍，学习vue必备

【vue2】vue全家桶介绍，学习vue必备

​ &#x1f973;博 主&#xff1a;初映CY的前说(前端领域) &#x1f31e;个人信条&#xff1a;想要变成得到&#xff0c;中间还有做到&#xff01; &#x1f918;本文核心&#xff1a;vue全家桶介绍&#xff0c;学习vue必备&#xff01;&#xff01;&#xff01; 【前言…
阅读更多...
Vue开发实例（11）之el-menu实现左侧菜单导航

Vue开发实例（11）之el-menu实现左侧菜单导航

作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的重要性&#xff0c;喜欢跟广大ADC一起打野升级&#xff0c;欢迎您关注&…
阅读更多...
【Vue从入门到进阶】Node.js安装与配置

【Vue从入门到进阶】Node.js安装与配置

✅作者简介&#xff1a;CSDN一位小博主&#xff0c;正在学习前端&#xff0c;欢迎大家一起来交流学习&#x1f3c6; &#x1f4c3;个人主页&#xff1a;白月光777的CSDN博客 &#x1f525;系列专栏&#xff1a;Vue从入门到进阶 &#x1f4ac;个人格言&#xff1a;但行好事&…
阅读更多...
OpenAI 发布GPT-4——全网抢先体验

OpenAI 发布GPT-4——全网抢先体验

OpenAI 发布GPT-4 最近 OpenAI 犹如开挂一般&#xff0c;上周才刚刚推出GPT-3.5-Turbo API&#xff0c;今天凌晨再次祭出GPT-4这个目前最先进的多模态预训练大模型。与上一代GPT3.5相比&#xff0c;GPT-4最大的飞跃是增加了识图能力&#xff0c;并且回答准确性也得到显著提高。…
阅读更多...
使用SpringBoot一小时快速搭建一个简单后台管理（后端篇）

使用SpringBoot一小时快速搭建一个简单后台管理（后端篇）

不好意思让大家久等啦&#xff0c;最近也是因为学期末了&#xff0c;事情多了一点&#xff0c;所以更新的比较慢&#xff0c;请大家谅解下~ 好了话不多说&#xff0c;进入今天的教程环节 本次案例一共两篇文章教学&#xff1a; &#xff08;第一篇&#xff09;&#xff1a;数据…
阅读更多...
聊聊vue3的defineProps、defineEmits、defineExpose

聊聊vue3的defineProps、defineEmits、defineExpose

最近在开发中用到了vue3的defineProps、defineEmits和defineExpose&#xff0c;感觉发现新大陆一般&#xff0c;所以利用闲碎时间对这三个方法做个总结。 defineProps const props defineProps<{foo: String,bar?: Number }>()defineProps 是vue3的写法并且是一个仅 …
阅读更多...
Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器

Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器

本文首发&#xff1a;《Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器》 Video.js 是最强大的网页嵌入式 HTML 5 视频播放器的组件库之一&#xff0c;也是大多数人首选的网页视频播放解决方案。复杂的网页视频渲染&#xff0c;在引入 Video.js 后&#xff0…
阅读更多...
idea连接SQL Server数据库

idea连接SQL Server数据库

数据库配置 1.安装数据库&#xff1a;自行安装 我的SQL Server版本为2019 2.登录数据库&#xff0c;登陆方式有两种&#xff0c;连接数据库选择SQLServer身份验证 1.windows登录&#xff0c;直接登录 2.SQLServer登录&#xff0c;需要输入用户名和密码&#xff0c;默…
阅读更多...
【Vant Weapp】van-cell 单元格

【Vant Weapp】van-cell 单元格

目录 自定义内容​​​​​​​ 自定义右侧value&#xff08;姓名手机号&#xff09; 自定义右侧value&#xff08;文件预览&#xff09; 自定义下方label描述信息 真机border相当明显 修改样式&#xff08;下边框、文字&#xff09; 循环列表中的cell 自定义内容 自定义…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023