vue 引入高德地图 路线规划

最新推荐文章于 2024-01-06 02:35:46 发布
最新推荐文章于 2024-01-06 02:35:46 发布
阅读量5.2k 收藏 45
点赞数 6
分类专栏： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47180815/article/details/115867456
版权
前端 同时被 2 个专栏收录
46 篇文章 1 订阅
订阅专栏
vue
45 篇文章 2 订阅
订阅专栏

由于vue-amap不支持路线规划，因此不予采纳。
效果如图
在这里插入图片描述

  1. 在index.html的header中引入
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e72a9f0cac3b081df05259299454cf1a"></script>
  <!--引入UI组件库（1.0版本） -->
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
  1. 配置webpack
    在build\webpack.base.conf.js 中，找到module.exports， 添加如下代码，记得重启项目！！！！
externals: {
    AMap: 'AMap',
    AMapUI: 'AMapUI'
},

在这里插入图片描述

  1. 绘制地图并规划路线（关键代码）

用来放地图

<div class="page" id="map-container"></div>

用来放路线规划

<div id="panel"></div>

初始化

this.map = new AMap.Map("map-container", {
      resizeEnable: true,
      center: [108.9470386505, 34.2593889736], // 地图中心点
      zoom: 16, // 地图显示的缩放级别
});

公交路线查询

new AMap.Transfer({
        map: this.map,
        panel: "panel",
      }).search(
        [
          { keyword: "宁波大学", city: "宁波" },
          { keyword: "宁波老外滩", city: "宁波" },
        ],
        function (status, data) {
          console.log(data);
        }
      );
  1. 完整代码（精简版）
<template>
  <div class="map-content">
    <div class="page" id="map-container"></div>
    <div id="panel"></div>
  </div>
</template>
<script>
import AMap from "AMap";
import AMapUI from "AMapUI";
export default {
  name: "Amap",

  data() {
    return {
      map: null,
    };
  },
  mounted() {
    // 地图初始化
    this.map = new AMap.Map("map-container", {
      resizeEnable: true,
      center: [108.9470386505, 34.2593889736], // 地图中心点
      zoom: 16, // 地图显示的缩放级别
    });
    // 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺
    // 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位)
    // 公交站点查询
    AMap.plugin(
      [
        "AMap.ToolBar",
        "AMap.Scale",
        "AMap.Transfer",
        "AMap.Geolocation",
        "AMap.StationSearch",
      ],
      () => {
        this.map.addControl(new AMap.ToolBar());
        this.map.addControl(new AMap.Scale());
        this.map.addControl(new AMap.Transfer());
        this.map.addControl(new AMap.Geolocation());
        this.map.addControl(new AMap.StationSearch());
      }
    );
    this.getRoute(); // 获取线路规划
  },
  methods: {
    // 1.路线规划，不乘坐地铁2.自行车出行（暂时不做）3.最快捷模式（综合出行[包含地铁]），用1,2,3来区分出行方式（goMethod）
    // 路线规划文档地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
    getRoute() {
      new AMap.Transfer({
        map: this.map,
        panel: "panel",
      }).search(
        [
          { keyword: "宁波大学", city: "宁波" },
          { keyword: "宁波老外滩", city: "宁波" },
        ],
        function (status, data) {
          console.log(data);
        }
      );
    },
  },
};
</script>
<style  scoped>
.page {
  height: calc(100vh - 50px);
}
.map-content {
  position: relative;
}
#panel {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
  1. 完整代码（定位、公交站点搜索、路线规划）

<template>
  <div class="map-content">
    <div class="page" id="map-container"></div>
    <div id="routeInfo"></div>
  </div>
</template>
<script>
import AMap from "AMap";
import AMapUI from "AMapUI";
export default {
  name: "Amap",
  components: { AMap, AMapUI },
  data() {
    return {
      map: null,
      transOptions: {},
      routeListData: [],
      stationListData: [],
    };
  },
  props: {
    sartAndEnd: Array, // 线路导乘起终点经纬度
  },
  mounted() {
    // 地图初始化
    this.map = new AMap.Map("map-container", {
      resizeEnable: true,
      center: [108.9470386505, 34.2593889736], // 地图中心点
      zoom: 16, // 地图显示的缩放级别
    });
    // 'AMap.ToolBar'集成了缩放、平移、定位等功能,'AMap.Scale'展示地图在当前层级和纬度下的比例尺
    // 添加需要操作的类AMap.Transfer(公交换乘[不包含地铁]),AMap.Geolocation(浏览器精准定位)
    // 公交站点查询
    AMap.plugin(
      [
        "AMap.ToolBar",
        "AMap.Scale",
        "AMap.Transfer",
        "AMap.Geolocation",
        "AMap.StationSearch",
      ],
      () => {
        this.map.addControl(new AMap.ToolBar());
        this.map.addControl(new AMap.Scale());
        this.map.addControl(new AMap.Transfer());
        this.map.addControl(new AMap.Geolocation());
        this.map.addControl(new AMap.StationSearch());
      }
    );
    this.getRoute(); // 获取线路规划
    this.getLocation(); // 获取我的位置
    this.getBusStation(); // 站点查询
  },
  methods: {
    // 1.路线规划，不乘坐地铁2.自行车出行（暂时不做）3.最快捷模式（综合出行[包含地铁]），用1,2,3来区分出行方式（goMethod）
    // 路线规划文档地址https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferPolicy
    getRoute(params) {
      params = 1;
      if (params === 1) {
        // map：AMap.Map对象, 展现结果的地图实例 panel：结果列表的HTML容器id或容器元素 nightflag：是否计算夜班车 policy：公交换乘策略
        this.transOptions = {
          map: this.map,
          city: "西安",
          panel: "routeInfo",
          nightflag: true,
          policy: AMap.TransferPolicy.NO_SUBWAY,
        };
      } else if (params === 2) {
        this.transOptions = {
          map: this.map,
          city: "西安",
          panel: "routeInfo",
          nightflag: true,
          policy: AMap.TransferPolicy.NO_SUBWAY,
        };
      } else if (params === 3) {
        this.transOptions = {
          map: this.map,
          city: "西安",
          panel: "routeInfo",
          nightflag: true,
          policy: AMap.TransferPolicy.LEAST_TIME,
        };
      }
      // 构造公交换乘类
      var transfer = new AMap.Transfer(this.transOptions);
      // 一：
      // 根据起、终点坐标查询公交换乘路线,使用父组件传入的起终点经纬度
      // transfer.search(new AMap.LngLat(108.9342500000, 34.2305300000), new AMap.LngLat(108.9470386505, 34.2593889736), function (status, result) {
      //   // result即是对应的公交路线数据信息
      //   if (status === 'complete') {
      //     // 出行计划按照时间顺序排序
      //     const route = result.plans.sort(function (a, b) { return a.time - b.time })
      //     this.routeListData = route
      //     console.log(this.routeListData)
      //     // console.log(this.routeListData)
      //   } else {
      //     console.log('公交路线数据查询失败' + result)
      //   }
      // })

      // 二：
      // 根据起、终点坐标查询公交换乘路线,使用父组件传入的起终点经纬度
      transfer.search(
        new AMap.LngLat(108.93425, 34.23053),
        new AMap.LngLat(108.9470386505, 34.2593889736)
      );
      AMap.event.addListener(transfer, "complete", (res) => {
        // res即是对应的公交路线数据信息
        // res为获取到的当前位置的信息
        console.log(res);
        // 出行计划按照时间顺序排序
        const route = res.plans.sort(function (a, b) {
          return a.time - b.time;
        });
        this.routeListData = route;
        console.log(this.routeListData);
      }); // 返回出行方式信息
      AMap.event.addListener(transfer, "error", (err) => {
        console.log(err);
      }); // 返回出行方式信息出错信息
    },
    // 获取当前位置
    getLocation() {
      // 定义定位获取当前位置
      var geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 100000, // 超过100秒后停止定位，默认：无穷大
        maximumAge: 0, // 定位结果缓存0毫秒，默认：0
        convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: false, // 显示定位按钮，默认：true
        // buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        showMarker: false, // 定位成功后在定位到的位置显示点标记，默认：true
        showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      });
      // 一定要add添加
      // this.map.addControl(geolocation)
      geolocation.getCurrentPosition(); // 获取用户当前的精确位置信息当回调函数中的status为complete的时候表示定位成功
      AMap.event.addListener(geolocation, "complete", (res) => {
        // res为获取到的当前位置的信息
        console.log(res);
      }); // 返回定位信息
      AMap.event.addListener(geolocation, "error", (err) => {
        console.log(err);
      }); // 返回定位出错信息
    },
    // 获取站点信息列表,使用父组件传入输入框的值
    getBusStation() {
      this.stationSearch = {
        pageIndex: 1, // 页码
        pageSize: 30, // 单页显示结果条数
        city: "029", // 确定搜索城市
      };
      var stationList = new AMap.StationSearch(this.stationSearch);
      // 一：
      // stationList.search('小', function (status, result) {
      //   // result即是对应的公交站点数据信息
      //   if (status === 'complete' && result.info === 'OK') {
      //     console.log(result)
      //     console.log(this.stationListData)
      //   } else {
      //     console.log('公交路线数据查询失败' + result)
      //   }
      // })
      // 二：
      stationList.search("西安钟楼"); // mock一个假数据
      AMap.event.addListener(stationList, "complete", (res) => {
        // res为获取到的当前位置的信息
        this.stationListData = res;
        console.log(this.stationListData);
      }); // 返回定位信息
      AMap.event.addListener(stationList, "error", (err) => {
        console.log(err);
      }); // 返回定位出错信息
    },
  },
};
</script>
<style  scoped>
.page {
  height: calc(100vh - 50px);
}
.map-content {
  position: relative;
}
#routeInfo {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
陌上烟雨寒
关注
  • 6
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
vue2/3 - 最新详细使用高德地图进行路线规划和详细途径路段信息，vue高德地图实现起点和终点路径高亮显示在地图上，并计算出整个路途公里数、预计到达时间、驾驶导航详细步骤信息（详细示例代码直接复制
高级前端工程师
05-11 3196
vue2，vue3，高德地图，vue高德地图，起点到终点，地图轨迹，路径规划，驾车轨迹图，利用高德地图实现车辆的路线规划，高德地图轨迹绘制，路段详细导航信息，vue实现高德地图路线规划功能，规划路线后如何获取途径的路段信息，途径数据，导航，导航详细数据，vue导航规划，导航路线规划绘制，导航规划后怎么获得途径的各路段，vue3使用高德地图，vue高德地图实现路线规划（含途经点），途径点详细数据，高德地图途径点怎么获取，行车路径规划 起始点+途经点，导航途径点数据用什么api，路线规划设置途经点，详细教程，高
高德地图实现路线规划
qq_40111133的博客
09-06 1027
//获取地图控件引用 map(savedInstanceState); landian(); LatLng latLng = new LatLng(39.92579, 116.453513); final Marker marker = aMap.addMarker(new MarkerOptions().position(latLng).title("北京").
高德地图系列（四）：vue项目利用高德地图实现车辆的路线规划
qq_45796592的博客
11-15 3275
vue项目利用高德地图实现车辆的路线规划详细教程
vue实现高德地图路线规划功能（位置经纬度+驾车规划路线）
weixin_50379372的博客
06-07 2126
【代码】vue实现高德地图路线规划功能（位置经纬度+驾车规划路线）
vue高德地图（三）：搜索地点并标记；绘制路线
NOyesNONO_的博客
11-22 2808
用高德api获取用户搜索地点并绘制路线
vue2实现高德地图 JSAPI 2.0可拖拽的路线规划(DragRoute)组件实现对每个经过点设置不同的经过点名称
qq_31745863的博客
03-17 2866
主要的思路是将route中的marker都重新修改content后再重新加载就可以实现了。此处我将DragRoute的初始化单独抽取成了一个方法,以上步骤完成后就集成了DragRoute组件。然后我们在每次初始化时都调用此方法就解决了。引入DragRoute组件。此时其实已经完成了目的功能。
基于高德地图实现vue3的移动端物流路线相关功能
奔跑吧代码
05-26 2005
基于高德地图实现vue3的移动端物流路线相关功能
vue使用高德地图web端JSAPI 路线规划、搜索提示教程
AstarCloud
07-05 3690
vue集成高德地图路线规划、搜索提示地址信息
vue vmap 高德地图路线规划
weixin_43873114的博客
03-17 809
组件 <template> <div class="map-wrap"> <el-amap :amap-manager="amapManager" :zoom="14" :center="centerPosition" vid="amapDemo" ref="reds" style="...
前端项目vue3结合高德地图实战，可直接运行
06-02
这个项目不仅展示了如何在Vue3环境中引入和使用高德地图，还涵盖了地图的基本操作，如显示地图、添加和删除标记点。下面我们将详细探讨其中涉及的关键知识点。 1. **Vue3框架**： Vue3是Vue.js的最新版本，提供了...
vue使用高德地图获取地理坐标信息
06-11
高德地图API提供了丰富的功能，包括定位、路线规划、地图展示等。以下将详细介绍如何在Vue项目中使用高德地图API获取地理坐标信息。 首先，确保你已经安装了Vue.js框架并创建了一个新的Vue项目。如果还没有，可以...
Vue 引入AMap高德地图的实现代码
10-17
在Vue项目中集成高德地图(AMap)可以为应用提供地理位置服务和地图展示功能。以下是如何在Vue CLI 3.x项目中引入并使用AMap的详细步骤： 1. **AMap准备**： 在开始之前，你需要先去[高德地图开放平台]...
高德地图Loca和路线规划vue演示项目.zip
10-21
在实际开发过程中，开发者可能需要配置Vue CLI，安装并引入高德地图的JavaScript库，设置地图的中心点、缩放级别，以及处理地图事件，如点击地图触发的事件。同时，路线规划功能会涉及对高德地图提供的规划API的调用...
vue使用elementui结合高德地图的定位以及位置显示
11-25
在Vue.js应用中，ElementUI是一个非常流行的前端组件库，提供了丰富的UI元素和交互设计，而高德地图则是一款强大的地图服务提供商，提供地图展示、定位、路线规划等功能。将ElementUI与高德地图结合，可以创建出具有...
Vue 高德地图（vue-amap）的基本使用：添加标记、POI关键字搜索、路线规划...(方法二)
qq_37831545的博客
09-26 3695
Vue 高德地图（vue-amap）：引入并初始化渲染地图，统一配置地图基础配置（版本、秘钥等），添加标记、POI关键字搜索、路线规划...
Vue+高德地图API的使用(POI搜索+多功能路径规划)上
qq_59863007的博客
08-04 3166
高德地图POI搜索
vue高德多条路线规划+带途径节点多组多个maker + maker批量带各自鼠标移入移出监听事件（对应的text标签显示与隐藏）+各路线颜色区别（版本三）
徐子厚的博客
09-07 2239
一功能介绍： vue高德批量路线规划+多组路线带途径节点marker+maker批量带各自鼠标移入移出监听事件（对应的text标签显示与隐藏）+各路线不同颜色显示+各marker带点击监听事件(显示途径点详细内容) 版本三：各线路上批量的marker各单个maker的鼠标监听事件（移入移出）对应控制各自另外各自对应创建text标签的显示与隐藏功能 效果图： 鼠标移入站点显示站点(maker)对应的站点名称（text）,鼠标移出站点则隐藏 点击某个站点生成规划同一路...
vue3+element-plus 高德地图路径规划
最新发布
chensi520的博客
01-06 670
【代码】vue3+element-plus 高德地图路径规划。
vue2高德地图多点标注
08-30
要在Vue2中实现高德地图的多点标注，你可以按照以下步骤进行操作： 1. 在Vue组件中引入高德地图的API，可以通过在`<head>`标签中添加`<script>`标签来引入高德地图的JavaScript API。 2. 在Vue组件中创建一个地图实例，可以使用`new AMap.Map`来实例化一个地图对象，并将其绑定到一个指定的DOM元素上。你可以使用以下代码创建地图实例： ```javascript map = new AMap.Map("container", { viewMode: "2D", zoom: 10, center: [83.28636635754393, 45.44533368853938], mapStyle: 'amap://styles/normal' }); ``` 这里的`"container"`是一个DOM元素的ID，表示地图将被渲染到该DOM元素中。 3. 在Vue组件中添加多个标记点，你可以使用`new AMap.Marker`来创建一个标记点对象，并将其添加到地图上。你需要为每个标记点指定一个位置（经纬度）和一个标记的图标。以下是一个添加标记点的示例代码： ```javascript marker1 = new AMap.Marker({ icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", position: [116.406315, 39.908775], offset: new AMap.Pixel(-13, -30) }); marker2 = new AMap.Marker({ icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", position: [经度, 纬度], offset: new AMap.Pixel(-13, -30) }); // 依次添加标记点到地图上 marker1.setMap(map); marker2.setMap(map); ``` 这里的`icon`表示标记点的图标，`position`表示标记点的位置（经纬度），`offset`表示标记点图标相对于位置的偏移量。 4. 最后，在Vue组件中显示地图和标记点。你可以在模板中添加一个包含地图的DOM元素，并将其样式设置为适当的大小。例如： ```html <template> <div id="map-container"></div> </template> <style> #map-container { width: 100%; height: 400px; } </style> ``` 这里的`map-container`是地图容器的ID，通过设置其宽度和高度来控制地图的大小。 通过按照以上步骤操作，你就可以在Vue2中实现高德地图的多点标注了。记得先引入高德地图的API，然后创建地图实例，并添加标记点到地图上。最后，在模板中显示地图容器即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue3实现高德地图多点标注（so easy）](https://blog.csdn.net/dyk11111/article/details/131002815)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值