高德地图在vue中实现,路线规划实现

1.引入方式:

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

2.创建地图组件

 3. 代码构成

template:
<template>
  <div class="mapComponents" id="container"></div>
</template>
script:
(1)引入AMapLoader
import AMapLoader from "@amap/amap-jsapi-loader";

(2)添加高德安全密钥(如果不加的话,路线规划功能会获取失败),安全密钥是和key一起申请的

window._AMapSecurityConfig = {
  securityJsCode: "您的安全密钥",
};

(3)data:

data() {
    return {
      map: null,
    };
  },

(4)mounted:

this.initAMap();

(5)unmounted:

this.map.destroy();

(6)methods:

initAMap() {
      AMapLoader.load({
        key: "您的key", // 申请好的Web端开发者Key,首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 14, // 初始化地图级别
            center: [121.475186, 31.228725],//地图显示中心点坐标
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },

完成以上步骤,就可以实现地图的显示了

 路线规划功能的实现还需要用到:AMap.Driving

先看效果图:

 我们需要在vue异步引入这个插件,上代码:(这块用的是根据经纬度设置起点终点的),官方链接:位置经纬度 + 驾车规划路线-驾车路线规划-示例中心-JS API 示例 | 高德地图API (amap.com)

这块代码需要放到这里:

 

  AMap.plugin(
          ["AMap.ToolBar", "AMap.Driving", "AMap.Polyline", "AMap.Marker"],
          function() {
            //异步同时加载多个插件
            var toolbar = new AMap.ToolBar();
            map.addControl(toolbar);
            var driving = new AMap.Driving({
              map: map,
            }); //驾车路线规划
            driving.search(
              new AMap.LngLat(121.378945, 31.264033),
              new AMap.LngLat(121.504128, 31.318716),
              function(status, result) {
                // result 即是对应的驾车导航信息,相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === "complete") {
                  console.log("绘制驾车路线完成", result);
                } else {
                  console.log("获取驾车数据失败:" + result);
                }
              }
            );
          }
        );

 

posted @ 2023-10-23 17:32  大云之下  阅读(1222)  评论(0编辑  收藏  举报
大云之下