• 本文将简单描述创建基础地图与如何使用其配置项等等

1 创建并使用

1.1 下载所需要的包

npm i @amap/amap-jsapi-loader

1.2 创建与使用展示

• 代码内部有大量注释描述其用法，并且官网也提供了具体写法，虽然是原生JS的，但只需将其转换成自己需要的写法就可以顺利使用 ------ 通过测试按钮切换不同的触发事件即可展示不同的效果。
• 官方示例地址入口
• 官方创建开发者账号与基础使用入口

<template>
  <!-- <div>
    <div id="container">
      <div id="panel"></div>
    </div>
  </div> -->
  <div class="map-content">
    <div id="container" class="map"></div>
    <div id="panel" @click="routePlanning">测试按钮</div>
  </div>
  <!-- <div class="info">
    <div class="input-item">
      <div class="input-item-prepend">
        <span class="input-item-text" style="width:8rem;">请输入关键字</span>
      </div>
      <input id='tipinput' type="text">
    </div> -->
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  // 设置安全密钥
  securityJsCode: "",
};
//下载自官网示例数据  http://a.amap.com/Loca/static/mock/districts.js
const districts = [];
export default {
  data() {
    return {
      map: "",
      path1: [],
      path2: [],
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale", // 比例尺
          "AMap.Transfer",
          "AMap.StationSearch",
          "AMap.ToolBar", // 添加右下角的放大缩小
          "AMap.Driving",
          "AMap.PlaceSearch",
          "AMap.Geolocation",
          "AMap.HawkEye", // 鹰眼，显示缩略图
          "AMap.MapType", // 添加右上角的标准图和卫星图  和路况
          "AMap.Weather",
          "AMap.controlBar", // 方向盘
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "2D", //  是否为3D地图模式
            zoom: 13, // 初始化地图级别
            center: [113.65553, 34.748764], //中心点坐标  郑州
            resizeEnable: true,
            isHotspot: true, // 开启地图的热点功能 (站点详情)
          });
          this.siteDetails();
          // 地图加载完成事件
          this.map.on("complete", function () {
            let a = 'abcdefg,'
            a = a.replace(/[abc,]/gi, '')
            console.log(a);
            console.log("地图加载完成！");
          });

          // showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
          // dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
          // keyboardEnable: false, //地图是否可通过键盘控制，默认为true
          // doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
          // zoomEnable: false, //地图是否可缩放，默认值为true
          // rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false

          // 交互控制
          // this.map.setStatus({
          //   dragEnable: true,
          //   keyboardEnable: true,
          //   doubleClickZoom: true,
          //   zoomEnable: true,
          //   rotateEnable: true,
          // });

          //使用CSS默认样式定义地图上的鼠标样式
          this.map.setDefaultCursor("pointer");

          // 点击获取经纬度
          this.map.on("click", function (e) {
            console.log("经度", e.lnglat.getLng());
            console.log("纬度", e.lnglat.getLat());
          });
          this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.MapType());
          this.map.addControl(new AMap.Scale());
          // this.map.addControl(new AMap.Transfer())
          this.map.addControl(new AMap.Geolocation());
          this.map.addControl(new AMap.HawkEye());
          // this.map.addControl(new AMap.controlBar()) // 方向盘
          // this.map.addControl(new AMap.StationSearch())
          // this.getRoute() // 获取线路规划
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            buttonPosition: "RB",
          });
          geolocation.getCurrentPosition(function (status, result) {
            console.log(status, result);
            if (status == "complete") {
              onComplete(result);
            } else {
              onError(result);
            }
          });

          function onComplete(data) {
            // data是具体的定位信息
          }

          function onError(data) {
            // 定位出错
          }
        })
        .catch((e) => {
          // console.log(e)
        });
    },
    // ----------------------------------------------------------------
    //地图移动与缩放事件
    logMapinfo() {
      // 移动事件
      this.map.on("moveend", () => {
        console.log("当前地图级别", this.map.getZoom());
        // lng, lat 代表经纬度
        console.log("当前地图中心位置", this.map.getCenter());
      });
      // 缩放事件
      this.map.on("zoomend", () => {
        console.log("当前地图级别", this.map.getZoom());
        console.log("当前地图中心位置", this.map.getCenter());
      });
    },
    // 设置经纬度
    steupMap() {
      this.map.setCenter([lng, lat]); //设置地图中心点
      this.map.setZoom(zoom); //设置地图层级
    },
    // 获取地图当前行政区
    getMapCity() {
      this.map.getCity((e) => {
        console.log("当前行政区", e);
      });
    },
    // 设置地图当前行政区
    setCityMap() {
      //可以是cityname、adcode、citycode
      // 现在默认郑州市  输入对应行政区  可模糊输入
      this.map.setCity("北京市");
    },
    // 设置/获取地图显示范围
    rangeMap() {
      console.log("获取", this.map.getBounds());
      // 设置
      var mybounds = new AMap.Bounds(
        [116.319665, 39.855919],
        [116.468324, 39.9756]
      );
      this.map.setBounds(mybounds);
    },
    //限制/取消地图显示范围
    lockMapBounds() {
      //获取地图显示范围
      var bounds = this.map.getBounds();
      //限制地图显示范围
      this.map.setLimitBounds(bounds);
      //取消地图显示限制
      this.map.clearLimitBounds();
    },
    // 地图的平移
    translation() {
      // 平移像素值
      // this.map.panBy(50, 100);
      // 移至指定位置
      //  map.panTo([116.405467, 39.907761]);
    },
    // 地图的热点功能 (站点详情)
    siteDetails() {
      // let placeSearch = new AMap.PlaceSearch(); //构造地点查询类
      // let infoWindow = new AMap.InfoWindow({}); //创建信息窗体
      // let maps = this.map;
      // //鼠标经过
      // this.map.on("hotspotover", function (result) {
      //   placeSearch.getDetails(result.id, function (status, result) {
      //     if (status === "complete" && result.info === "OK") {
      //       let poiArr = result.poiList.pois;
      //       let location = poiArr[0].location;
      //       //信息窗体内容
      //       let dialog = [];
      //       dialog.push(
      //         '<div class="info-title">' +
      //           poiArr[0].name +
      //           '</div><div class="info-content">' +
      //           "地址：" +
      //           poiArr[0].address
      //       );
      //       dialog.push("电话：" + poiArr[0].tel);
      //       dialog.push("类型：" + poiArr[0].type);
      //       dialog.push("<div>");
      //       dialog.join("<br>");
      //       // 向信息框体添加内容
      //       infoWindow.setContent(dialog);
      //       // 打开信息框体
      //       infoWindow.open(maps, location);
      //     }
      //   });
      // });
    },
    // 构造点标记/矢量圆形
    signMap() {
      // 构造点标记
      let marker = new AMap.Marker({
        // 标记的样式
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        // 标记点的经纬度
        position: [113.65553, 34.748764],
        anchor: "bottom-center",
      });
      // 构造矢量圆形
      var circle = new AMap.Circle({
        center: new AMap.LngLat("113.65553", "34.748764"), // 圆心位置
        radius: 1000, //半径
        strokeColor: "#F33", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 3, //线粗细度
        fillColor: "#ee2200", //填充颜色
        fillOpacity: 0.35, //填充透明度
      });
      // 添加标记
      this.map.add(marker);
      this.map.add(circle);
      // 移除标记
      // this.map.remove(marker);
      // this.map.remove(circle);
      // 自动适配到合适视野范围
      // 无参数，默认包括所有覆盖物的情况
      this.map.setFitView();
    },
    // 路线规划
    routePlanning() {
      //构造路线导航类
      var driving = new AMap.Driving({
        map: this.map,
        panel: "panel",
      });
      // 根据起终点名称规划驾车导航路线
      driving.search(
        [
          { keyword: "郑州动物园(公交站)", city: "郑州" },
          { keyword: "郑州人民公园(地铁站)", city: "郑州" },
        ],
        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);
          }
        }
      );
    },
  },
};
</script>

<style  scoped lang="less">
.map {
  height: 100vh;
}
.map-content {
  position: relative;
}
#panel {
  position: absolute;
  top: 0;
  right: 0;
  &:hover {
    cursor: pointer;
  }
}
.info-title {
  font-weight: bolder;
  color: #000;
  font-size: 14px;
  width: 250px;
  height: 250px;
  line-height: 26px;
  padding: 0 0 0 6px;
  background-color: pink;
}
.info-content {
  width: 250px;
  padding: 4px;
  color: #666666;
  line-height: 23px;
  font: 12px Helvetica, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", Arial;
}
</style>