Bootstrap

vue3 高德地图使用方法

  • 高德地图（AMap）提供了丰富的在线地图服务和功能，常用于Web和移动应用中的地理位置展示和导航。
  • 一、准备工作
  • 注册高德地图开发者账号：
  • 访问 高德地图官网，注册并登录开发者账号。
  • 创建应用并获取API Key：
  • 在控制台创建新的应用，获取应用对应的API Key（也称为开发者密钥）。
  • 二、安装高德地图依赖
  • npm install @amap/amap-jsapi-loader
# or
pnpm add @amap/amap-jsapi-loader
# or
yarn add @amap/amap-jsapi-loader

  •  三、创建组件 src/components/Map.vue 并在页面中引用相关API
  • 四、引入依赖
  • import AMapLoader from '@amap/amap-jsapi-loader';

    2.添加Key值，在高德地图创建应用时获取的API Key，复制后将Key 值添加 到组件，就可以使用了

  •  AMapLoader.load({
      key: '你的应用key', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then(AMap => {
          //JS API 加载完成后获取的AMAP对象
        })
      .catch((e)=>{
        console.log(e) //加载错误提示
        });

  • 五、地图初始化，在回调函数中创建基本图层数据
  • let map = new AMap.Map('map', {
          //设置地图容器id
          zoom: 15, //初始化地图层级
          viewMode: '3D', //是否为3D地图模式
          center: [104.065735, 30.659462], //初始化地图中心点位置
          dragEnable: true, //鼠标拖拽
          scrollWheel: true, //鼠标滚轮放大缩小
          doubleClickZoom: true, //双击放大缩小
          keyboardEnable: true, //键盘控制放大缩小移动旋转
        });
  • 六、引入地图控件
  • let map = new AMap.Map('map', {
          //设置地图容器id
          zoom: 15, //初始化地图层级
          viewMode: '3D', //是否为3D地图模式
          center: [104.065735, 30.659462], //初始化地图中心点位置
          dragEnable: true, //鼠标拖拽
          scrollWheel: true, //鼠标滚轮放大缩小
          doubleClickZoom: true, //双击放大缩小
          keyboardEnable: true, //键盘控制放大缩小移动旋转
        });
  • 七、创建 Marker 对象（标记点）
  • data.map(e => {
          marker.push(
            new AMap.Marker({
              map: map, //将m1这个点添加到map地图里
              position: e.position,
              title: e.title,
              id: e.id,
            }),
          );
        });
        //这里是循环添加点击事件，将每一个点都注册一变
        for (var i = 0; i < marker.length; i++) {
          marker[i].on('click', clickHandler);
        }
        //将创建的点标记添加到已有的地图实例：
        map.add(marker);
  • 八、标记点之间绘制线
  • // 线
        var line = new AMap.Polyline({
          strokeColor: '#80d8ff', //描边的颜色
          isOutline: true, //包含轮廓
          lineJoin: 'bevel', //折线拐点连接处样式
          outerlineColor: 'white',
          strokeStyle: 'solid', //线样式
          lineCap: 'round', //线端点样式
          showDir: true, //是否显示方向箭头
          strokeWeight: 6, //线的宽度
        });
        line.setMap(map);
  • 九、绘制标记点范围
  • // 让地图根据覆盖调整地图显示区域
        // map.setFitView();
        marker.map(e => {
          circleMarker.push(
            new AMap.Circle({
              center: e.getPosition(), //圆心
              radius: 200, //半径
              strokeColor: '#FF33FF', //轮廓线颜色
              strokeStyle: 'dashed',
              strokeDasharray: [10, 10],
              strokeWeight: 2, //轮廓线宽度
              strokeOpacity: 0.5, //轮廓线透明度
              fillColor: 'rgba(0,0,215,0.5)', //多边形填充颜色
              fillOpacity: 0.5, //多边形填充透明度
              zIndex: 10, //多边形覆盖物的叠加顺序
              cursor: 'pointer', //鼠标悬停时的鼠标样式
            }),
          );
        });
        for (var i = 0; i < circleMarker.length; i++) {
          //圆形 circleMarker 对象添加到 Map
          map.add(circleMarker[i]);
        }
  • 十、最终页面实现效果

 

完整代码 ：
<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script setup>
  import AMapLoader from '@amap/amap-jsapi-loader'; // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
  import { shallowRef } from '@vue/reactivity';
  import { onMounted } from '@vue/runtime-core';
  const emit = defineEmits(['showEcharts']);
  const data = [
    {
      map: '',
      position: [104.065735, 30.659462],
      title: '成都',
      id: '1',
    },
    {
      map: '',
      position: [104.071009, 30.658694],
      title: '北京',
      id: '2',
    },
    {
      map: '',
      position: [104.054695, 30.655498],
      title: '上海',
      id: '3',
    },
    {
      map: '',
      position: [104.057029, 30.664587],
      title: '广州',
      id: '4',
    },
  ];
  let p = [];
  let marker = [];
  let circleMarker = [];
  const map = shallowRef(null); // 初始化地图
  function initMap() {
    AMapLoader.load({
      key: '你申请应用的key', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then(AMap => {
        let map = new AMap.Map('map', {
          //设置地图容器id
          zoom: 15, //初始化地图层级
          viewMode: '3D', //是否为3D地图模式
          center: [104.065735, 30.659462], //初始化地图中心点位置
          dragEnable: true, //鼠标拖拽
          scrollWheel: true, //鼠标滚轮放大缩小
          doubleClickZoom: true, //双击放大缩小
          keyboardEnable: true, //键盘控制放大缩小移动旋转
        });
        //异步加载工具条插件
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation', 'AMap.HawkEye'], function () {
          //在回调函数中实例化插件
          map.addControl(new AMap.Scale()); //异步同时加载多个插件
          map.addControl(new AMap.ToolBar()); //添加工具条插件到页面
          map.addControl(new AMap.Geolocation());
          map.addControl(
            new AMap.HawkEye({
              position: 'LT', //控件停靠位置（LT/RT/LB/RB）
            }),
          );
        });
        map.setDefaultCursor('pointer'); //使用CSS默认样式定义地图上的鼠标样式（default/pointer/move/crosshair）
        // map.on('complete', function () {
        //   alert('地图加载完成！');
        // });
        data.map(e => {
          marker.push(
            new AMap.Marker({
              map: map, //将m1这个点添加到map地图里
              position: e.position,
              title: e.title,
              id: e.id,
            }),
          );
        });
        //这里是循环添加点击事件，将每一个点都注册一变
        for (var i = 0; i < marker.length; i++) {
          marker[i].on('click', clickHandler);
        }
        //将创建的点标记添加到已有的地图实例：
        map.add(marker);
        // 让地图根据覆盖调整地图显示区域
        // map.setFitView();
        marker.map(e => {
          circleMarker.push(
            new AMap.Circle({
              center: e.getPosition(), //圆心
              radius: 200, //半径
              strokeColor: '#FF33FF', //轮廓线颜色
              strokeStyle: 'dashed',
              strokeDasharray: [10, 10],
              strokeWeight: 2, //轮廓线宽度
              strokeOpacity: 0.5, //轮廓线透明度
              fillColor: 'rgba(0,0,215,0.5)', //多边形填充颜色
              fillOpacity: 0.5, //多边形填充透明度
              zIndex: 10, //多边形覆盖物的叠加顺序
              cursor: 'pointer', //鼠标悬停时的鼠标样式
            }),
          );
        });
        for (var i = 0; i < circleMarker.length; i++) {
          //圆形 circleMarker 对象添加到 Map
          map.add(circleMarker[i]);
        }
        // 线
        var line = new AMap.Polyline({
          strokeColor: '#80d8ff', //描边的颜色
          isOutline: true, //包含轮廓
          lineJoin: 'bevel', //折线拐点连接处样式
          outerlineColor: 'white',
          strokeStyle: 'solid', //线样式
          lineCap: 'round', //线端点样式
          showDir: true, //是否显示方向箭头
          strokeWeight: 6, //线的宽度
        });
        line.setMap(map);
        function compute() {
          marker.map(i => {
            p.push(i.getPosition());
          });
          var path = p;
          line.setPath(path); //绘制线
        }
        compute();
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', function (e) {
          // console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat());
          document.getElementById('lnglat').value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
        });
      })
      .catch(e => {
        console.log(e);
      });
  }
  const clickHandler = function (e) {
    // console.log(e.target._originOpts);
    emit('showEcharts', true,e.target._originOpts.id);
    // alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
  };
  // 调用地图初始化函数：onMounted 函数会在 DOM 初始化完成后调用，建议在 mounted 函数中调用地图初始化方法
  onMounted(() => {
    initMap();
  });
</script>

<style>
  #map {
    /* margin: 50px auto; */
    width: 100%;
    height: 100vh;
  }
</style>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
[C++] 回溯法生成数独
vue嵌入app中——首次加载慢的动画
Spring Cloud Stream 结合rocketmq
【JS】构造函数、实例化对象、构造函数原型之间的关系
Web安全：X-XSS-Protection头（防XSS攻击设置）
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
（5-3）D*算法：处理迷宫中的动态障碍物
设计用户模块的schema
一文通透优化算法：从梯度下降、SGD到牛顿法、共轭梯度(23修订版)
KMP算法
;