diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue index dc4cfbc..44a6622 100644 --- a/src/components/map/Map.vue +++ b/src/components/map/Map.vue @@ -12,6 +12,14 @@ type: Number, default: 17, }, + needLineMarker: { + type: Boolean, + default: true, + }, + needSetFitView: { + type: Boolean, + default: true, + }, // 坐标点数组(包含左边点信息) // 例:[{alarmCode: "XJBJ202310300067",lat: "39.914083",log: "116.265872",icon: ""}] // 必须含有坐标点数据icon @@ -24,6 +32,7 @@ const isMap = ref(false) // 是否初始话完成 declare const window: any const map = ref() // 地图实例 +const Zoom = ref(17) const AMapRef = ref() const infoWindow = ref() // 信息窗体 const windowInfoRef = ref() // 信息窗体实例 @@ -62,6 +71,14 @@ // map.value.add(marker) // 标注添加到地图 // } isMap.value = true + map.value.on('zoomchange', (e) => { + // 获取当前最新的地图层级 + Zoom.value = map.value.getZoom() + console.log(Zoom.value) + /** + * 地图层级发生改变后操作 + * */ + }) }) } // 根据经纬度查询位置信息 @@ -139,7 +156,9 @@ // 将标记点添加到地图 map.value.add([marker]) - map.value.setFitView() + if (props.needSetFitView) { + map.value.setFitView() + } } } // 绘制折线(轨迹) @@ -148,43 +167,44 @@ // 加工标记点数据 const pointArr = arr.map((item: any) => ([Number(item.lng), Number(item.lat)])) const AMap = AMapRef.value - + // 将标记点添加到地图 + if (props.needLineMarker) { // 标记点绘制 - for (let i = 0; i < arr.length; i++) { + for (let i = 0; i < arr.length; i++) { // 自定义标记点 - const markerContent = '' + const markerContent = '' + '
' + `${i + 1}` + '
' - // 标记点 - const marker = new AMap.Marker({ + // 标记点 + const marker = new AMap.Marker({ // zooms: [16, 20], // 缩放 - position: pointArr[i], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] - map: map.value, - content: markerContent, - offset: new AMap.Pixel(0, 0), - }) - lineMarkerList.value.push(marker) - // 信息窗体 - infoWindow.value = new AMap.InfoWindow({ - isCustom: true, // 自定义信息窗体 - content: windowInfoRef.value.$el, // 窗体内容(vue组件) - offset: new AMap.Pixel(9, -5), // 偏移 - }) - // 信息窗体点击事件 - marker.on('click', (e) => { - // 打开信息窗口 - infoWindow.value.open(map.value, e.lnglat) - // 初始化信息窗口 - windowInfoRef.value.initialize({ - overlay: e.target, - infoWindow: infoWindow.value, - // 标记点详细信息 - info: arr[i], + position: pointArr[i], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] + map: map.value, + content: markerContent, + offset: new AMap.Pixel(0, 0), }) - }) - // 将标记点添加到地图 - map.value.add([marker]) + lineMarkerList.value.push(marker) + // 信息窗体 + infoWindow.value = new AMap.InfoWindow({ + isCustom: true, // 自定义信息窗体 + content: windowInfoRef.value.$el, // 窗体内容(vue组件) + offset: new AMap.Pixel(9, -5), // 偏移 + }) + // 信息窗体点击事件 + marker.on('click', (e) => { + // 打开信息窗口 + infoWindow.value.open(map.value, e.lnglat) + // 初始化信息窗口 + windowInfoRef.value.initialize({ + overlay: e.target, + infoWindow: infoWindow.value, + // 标记点详细信息 + info: arr[i], + }) + }) + map.value.add([marker]) + } } // 折线绘制 const polyline = new AMap.Polyline({ @@ -238,7 +258,7 @@ } } -defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine }) +defineExpose({ drawPonit, clearDraw, isMap, drawLine, clearPonit, clearLine, Zoom, markerList })