diff --git a/public/img/icon1.png b/public/img/icon1.png new file mode 100644 index 0000000..fd9a5ed --- /dev/null +++ b/public/img/icon1.png Binary files differ diff --git a/public/img/icon1.png b/public/img/icon1.png new file mode 100644 index 0000000..fd9a5ed --- /dev/null +++ b/public/img/icon1.png Binary files differ diff --git a/public/img/icon2.png b/public/img/icon2.png new file mode 100644 index 0000000..0eb5760 --- /dev/null +++ b/public/img/icon2.png Binary files differ diff --git a/public/img/icon1.png b/public/img/icon1.png new file mode 100644 index 0000000..fd9a5ed --- /dev/null +++ b/public/img/icon1.png Binary files differ diff --git a/public/img/icon2.png b/public/img/icon2.png new file mode 100644 index 0000000..0eb5760 --- /dev/null +++ b/public/img/icon2.png Binary files differ diff --git a/src/components/map/index.vue b/src/components/map/index.vue index eb370a9..b17a9b9 100644 --- a/src/components/map/index.vue +++ b/src/components/map/index.vue @@ -8,6 +8,7 @@ import infoDetail from './infoWindow.vue' import infoDetail2 from './infoWindow2.vue' import { electricityBranch, electricityNode, getElectricityListAll, getMonitorStationList } from '@/api/api/index' +const publicPath = import.meta.env.BASE_URL // 设置安全密钥 window._AMapSecurityConfig = { securityJsCode: '56bf9671d4b3517d294caec4751889a1', // 后期需替换 @@ -41,6 +42,13 @@ const markerArrInfo1 = ref() // 折现节点坐标 const lineArr = ref([]) +// 地图点击事件 +const clickHandler = function (e) { + const location = [e.lnglat.getLng(), e.lnglat.getLat()] + if (event.button === 2) { + console.log('当前点击坐标为: ', location) + } +} // 初始化地图 const initMap = () => { AMapLoader.load({ @@ -54,9 +62,11 @@ viewMode: '3D', // 是否为3D地图模式 zoom: 17, // 初始化地图级别 // center: markerArr.value[0], - center: [116.26755900, 39.91547100], + center: [111.765543, 40.717444], resizeEnable: true, }) + // 绑定右击时间 + map.value.on('mousedown', clickHandler) // 用来画区域的 // polygon.value = new AMap.Polygon({ // map: map.value, @@ -95,7 +105,7 @@ const icon = new AMap.Icon({ size: new AMap.Size(36, 36), // 图标尺寸 // image: 'https://img1.baidu.com/it/u=783564618,4142196075&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', // Icon的图像 - image: 'http://111.198.10.15:11404/imgs/1.png', // Icon的图像 + image: `${publicPath}img/icon1.png`, // Icon的图像 imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片 imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等 }) @@ -135,7 +145,7 @@ for (let i = 0; i < markerArr1.value.length; i++) { const icon = new AMap.Icon({ size: new AMap.Size(36, 36), // 图标尺寸 - image: 'http://111.198.10.15:11404/imgs/2.png', // Icon的图像 + image: `${publicPath}img/icon2.png`, // Icon的图像 imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片 imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等 })