vue3+高德地图@vuemap/vue-amap矢量图形+ant-design-vue

最新推荐文章于 2025-09-12 13:47:48 发布

原创

最新推荐文章于 2025-09-12 13:47:48 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在vue3项目中结合vue-amap和ant-design-vue库，实现地图上的矢量图形操作，包括点击地图打点和画圆的功能。通过lazyAMapApiLoaderInstance加载高德地图API，并在组件中设置setup属性完成交互逻辑。

1，安装vuemap/vue-amap和ant-design-vue

2,引入lazyAMapApiLoaderInstance和样式

import '@vuemap/vue-amap/dist/style.css'
import {message} from 'ant-design-vue'
import { lazyAMapApiLoaderInstance } from '@vuemap/vue-amap';

3，调用lazyAMapApiLoaderInstance即可

 lazyAMapApiLoaderInstance.then(() => {
    global.map = new AMap.Map('Amap', {//该处global只是配置的全局变量，'Amap'是地图挂载div的id
    center: new AMap.LngLat(116.3939666748047,39.91763621372857),//中心点
    zoom:13,//地图缩放级别
    viewMode:'3D',//3D地图
  });
  global.map.on('click',mapClick)//给地图绑定点击事件
  //构造点标记
  var marker = new AMap.Marker({
    position: new AMap.LngLat(116.3939666748047,39.91763621372857),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京'
});
// 构造矢量圆形
var circle = new AMap.Circle({
    center: new AMap.LngLat(116.3939666748047,39.91763621372857), // 圆心位置
    radius: '3000',  //半径
    strokeColor: "#F33",  //线颜色
    strokeOpacity: 1,  //线透明度
    strokeWeight: 3,  //线粗细度
    fillColor: "#ee2200",  //填充颜色
    fillOpacity: 0 //填充透明度
});
global.map.add(marker);//将点挂载到地图上
global.map.add(circle);//将圆挂载到地图上
circle.on('click',cirClick)//给圆绑定点击事件
});

初始化后页面展示

最低0.47元/天解锁文章