Vue3 + 高德地图

最新推荐文章于 2025-03-07 10:23:08 发布

Luckyflowers

最新推荐文章于 2025-03-07 10:23:08 发布

阅读量1.5w

点赞数 11

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/m0_68683769/article/details/124279446

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue3项目中集成高德地图，包括申请开发者Key、安装vue-amap库、设置地图容器和样式，以及详细讲解了Marker的使用，如创建实例、自定义样式、显示地图信息和信息窗体。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

快速上手

1.在高德开发平台申请开发者账号申请key
2.安装vue-amap

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

3.创建 div 标签作为地图容器，并设置地图容器的 id 属性

<div id="map"></div>

4.设置地图容器样式，为容器指定高度、宽度

#map {
  margin: 50px auto;
  width: 800px;
  height: 500px;
}

5.在组件中引入所需的 API（ amap-jsapi-loader ）

import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
import { shallowRef } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'

基础类的使用

Marker（标记点）

创建一个 Marker 实例

let markerPoint = new AMap.Marker({
    position: [121.939253, 29.905078], // 基点坐标
    offset: new AMap.Pixel(-12, -32), // //标记点相对偏移量，可以固定其地址，不随着地图缩放而偏移
    draggable: false, //点标记对象是否可拖拽移动
    defaultCursor: 'pointer'
 });
 map.add(markerPoint); // 地图添加标记

自定义 Marker 样式

// 方法一
var startIcon = new AMap.Icon({
	size: new AMap.Size(25, 34),// 图标尺寸
    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',// 图标的取图地址
    imageSize: new AMap.Size(135, 40),// 图标所用图片大小
    imageOffset: new AMap.Pixel(-9, -3)// 图标取图偏移量
});
// 将 icon 传入 marker
var startMarker = new AMap.Marker({
	position: new AMap.LngLat(116.35,39.89),
    icon: startIcon,
    offset: new AMap.Pixel(-13, -30)
});
startMarker.setMap(map);//设置地图标记

// 方法二
let marker = 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),//标记点相对偏移量，可以固定其地址，不随着地图缩放而偏移
    icon: new AMap.Icon({
    	size: new AMap.Size(40, 50),  //图标的大小
        image: "https://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",
        imageOffset: new AMap.Pixel(0, -60)
	})
});
map.add(marker);

显示地图层级与中心点信息

<div class="info">
	<h4>获取地图级别与中心点坐标</h4>
    <p>当前级别：<span id="map-zoom">11</span></p>
    <p>当前中心点：<span id="map-center">121.498586,31.239637</span></p>
</div>

function logMapinfo(){
	let zoom = map.getZoom(); //获取当前地图级别
	let center = map.getCenter(); //获取当前地图中心位置
    document.querySelector("#map-zoom").innerText = zoom;
    document.querySelector("#map-center").innerText = center.toString();
};
//绑定地图移动与缩放事件
map.on('moveend', logMapinfo);
map.on('zoomend', logMapinfo);

获取经纬度坐标

<div class="input-card">
    <h4>鼠标左键获取经纬度：</h4>
    <div class="input-item">
      <input type="text" readonly="true" id="lnglat">
    </div>
</div>

//为地图注册click事件获取鼠标点击出的经纬度坐标
map.on('click', function(e) {
	document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
});

信息窗体

let infoWindow = new AMap.InfoWindow({ //创建信息窗体
	isCustom: false,  //使用自定义窗体
    anchor: "top-right", //信息窗体的三角所在位置
    content:`<h4>信息窗体</h4>`, //信息窗体的内容可以是任意html片段
    offset: new AMap.Pixel(16, -45)
});
infoWindow.open(map,[121.939253, 29.905078]); //填写想要窗体信息指示的坐标

示例

// 简单功能的实现
setup() {
    const map = shallowRef(null);

    // 初始化地图
    function initMap() {
      AMapLoader.load({
        key: "e6cf30fd79d7b556ee881ddd0281e8d0", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Scale", //工具条，控制地图的缩放、平移等
          "AMap.ToolBar", //比例尺，显示当前地图中心的比例尺
          "AMap.Geolocation", //定位，提供了获取用户当前准确位置、所在城市的方法
          "AMap.HawkEye", //鹰眼，显示缩略图
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          let map = new AMap.Map("map", {//设置地图容器id
            zoom: 5, //初始化地图层级
            viewMode: "3D", //是否为3D地图模式
            center: [116.397436, 39.909165], //初始化地图中心点位置
            dragEnable: true, //禁止鼠标拖拽
            scrollWheel: true, //鼠标滚轮放大缩小
            doubleClickZoom: true, //双击放大缩小
            keyboardEnable: true, //键盘控制放大缩小移动旋转
          });
          map.setDefaultCursor("pointer"); //使用CSS默认样式定义地图上的鼠标样式（default/pointer/move/crosshair）
          map.addControl(new AMap.Scale()); //异步同时加载多个插件
          map.addControl(new AMap.ToolBar());
          map.addControl(new AMap.Geolocation());
          let HawkEye = new AMap.HawkEye({
            position: "LT", //控件停靠位置（LT/RT/LB/RB）
          });
          map.addControl(HawkEye);
          map.add(
            new AMap.Marker({
              position: map.getCenter(),
            })
          );
          // map.add(marker); // 地图添加标记
          AMapLoader.load({
            //可多次调用load
            plugins: ["AMap.MapType"],
          })
            .then((AMap) => {
              map.addControl(new AMap.MapType());
            })
            .catch((e) => {
              console.error(e);
            });
          // 显示地图层级与中心点信息
          function logMapinfo() {
            let zoom = map.getZoom(); //获取当前地图级别
            let center = map.getCenter(); //获取当前地图中心位置
            document.querySelector("#map-zoom").innerText = zoom;
            document.querySelector("#map-center").innerText = center.toString();
          }
          //绑定地图移动与缩放事件
          map.on("moveend", logMapinfo);
          map.on("zoomend", logMapinfo);
          //为地图注册click事件获取鼠标点击出的经纬度坐标
          map.on("click", function (e) {
            document.getElementById("lnglat").value =
              e.lnglat.getLng() + "," + e.lnglat.getLat();
          });
          let infoWindow = new AMap.InfoWindow({
            //创建信息窗体
            isCustom: false, //使用自定义窗体
            anchor: "top-right", //信息窗体的三角所在位置
            content: `<h4>信息窗体</h4>`, //信息窗体的内容可以是任意html片段
            offset: new AMap.Pixel(16, -45),
          });
          infoWindow.open(map, [121.939253, 29.905078]); //填写想要窗体信息指示的坐标
        })
        .catch((e) => {
          console.log(e);
        });
    }

    // 调用地图初始化函数：onMounted 函数会在 DOM 初始化完成后调用，建议在 mounted 函数中调用地图初始化方法
    onMounted(() => {
      initMap();
    });

    return { map, initMap };
},