Vue2+Web端高德地图

1. 先进高德api网址注册https://lbs.amap.com，选择控制台-应用管理-我的应用-创建新应用

服务平台选择web端，域名白名单如果是个人练习使用不用填写，其他需要填写域名

2. 高德地图组件库：

比例尺 | @vuemap/vue-amap (yangyanggu.github.io)

3. 安装loader环境

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

4. component目录下新建MapContainer文件夹，文件夹下创建MapContainer.vue文件

<template>
  <div id="container"></div>
</template>

<script>
// 引入AMapLoader，并引入安全密钥
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "高德安全密钥",
};

export default {
  data() {
    return {
      map: null,
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "高德key", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，默认为 1.4.15
        // 需要使用的的插件列表
        plugins: [
          "AMap.ToolBar", //工具条
          "AMap.Scale", //比例尺
          "AMap.HawkEye",//鹰眼
          "AMap.MapType",//图层切换
          "AMap.Geolocation"//定位到当前位置
        ],
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D",//切换3d/2d模式
            zoom: 10,//缩放级别
            center: [105.602725, 37.076636],//初始定位
          });

          // 直接使用浏览器的 geolocation API 获取当前位置
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
              (position) => {
                console.log("经度:", position.coords.longitude);
                console.log("纬度:", position.coords.latitude);
              },
              (error) => {
                console.error("获取位置失败:", error);
              },
              { enableHighAccuracy: true, timeout: 10000 }
            );
          } else {
            console.error("浏览器不支持地理位置获取");
          }

          this.map.addControl(new AMap.Scale());
          this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.HawkEye());
          this.map.addControl(new AMap.MapType());
          this.map.addControl(new AMap.Geolocation());
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 700px;
  position: relative;
}
</style>

5. 新建页面文件导入MapContainer组件

<template>
  <div id="index_container">
    <div id="map_wrap">
      <map-container></map-container>
    </div>
  </div>
</template>
<script>
import MapContainer from "@/components/MapContainer/MapContainer";
export default {
  components: { MapContainer },
};
</script>

<style scoped>
#index_container {
  width: 100%;
  height: 700px;
  position: relative;
}
</style>

效果图：

标准图层：

卫星图：

路网：

路况：

右下角有个定位按钮，这里就不放出来定位的效果啦，各位自己试试吧