|
|
@@ -101,7 +101,6 @@ let allMarkers = []
|
|
|
|
|
|
// 添加标记后更新中心和缩放级别
|
|
|
const addMarkersToMap = () => {
|
|
|
- // debugger
|
|
|
if (!map) return // 确保地图已经初始化
|
|
|
|
|
|
markerPositions.value.forEach((position) => {
|
|
|
@@ -126,14 +125,14 @@ const addMarkersToMap = () => {
|
|
|
allMarkers[`${position.lat},${position.lng}`] = marker
|
|
|
})
|
|
|
|
|
|
-<<<<<<< HEAD
|
|
|
- updateVisibleMarkers()
|
|
|
-
|
|
|
if (viewData.value.length > 0) {
|
|
|
->>>>>>> dev
|
|
|
+ // 根据标记的位置设置中心点以及缩放级别
|
|
|
+ const bounds = L.latLngBounds(viewData.value)
|
|
|
+ map!.fitBounds(bounds, { paddingTopLeft: [20, 70], paddingBottomRight: [0, 0] })
|
|
|
setTimeout(() => {
|
|
|
if (isFirstRender) {
|
|
|
initialCenter = map!.getCenter()
|
|
|
+ initialZoomLevel = map!.getZoom()
|
|
|
isFirstRender = false
|
|
|
}
|
|
|
addResetZoomButton(initialCenter!, initialZoomLevel!)
|
|
|
@@ -154,8 +153,8 @@ const getMarker = () => {
|
|
|
if (res.code === 200) {
|
|
|
allMapData.value = res.data
|
|
|
const { data } = res
|
|
|
- data?.point &&
|
|
|
- data?.point.forEach((item) => {
|
|
|
+ data &&
|
|
|
+ data.forEach((item) => {
|
|
|
const iconColorList = {
|
|
|
Destination: { color: '#24ca5a', icon: destinationIcon },
|
|
|
Origin: { color: '#ED6D00', icon: originIcon },
|
|
|
@@ -174,17 +173,6 @@ const getMarker = () => {
|
|
|
return [Number(item.lat), Number(item.lng)]
|
|
|
}) // 请求成功后添加标记，并动态添加重置按钮
|
|
|
addMarkersToMap()
|
|
|
- if (data?.dottedLine) {
|
|
|
- draw_marker(handleData(data.dottedLine), handleData(data.solidLine))
|
|
|
- map.on('moveend', function () {
|
|
|
- draw_marker(handleData(data.dottedLine), handleData(data.solidLine))
|
|
|
- updateVisibleMarkers()
|
|
|
- })
|
|
|
- map.on('zoomend', function () {
|
|
|
- draw_marker(handleData(data.dottedLine), handleData(data.solidLine))
|
|
|
- updateVisibleMarkers()
|
|
|
- })
|
|
|
- }
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
@@ -283,8 +271,11 @@ onUnmounted(() => {
|
|
|
}
|
|
|
&:first-child {
|
|
|
span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 24px;
|
|
|
height: 28px;
|
|
|
border-bottom: 1px solid #3f434a;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -304,51 +295,6 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .reset-zoom-control {
|
|
|
- border: none;
|
|
|
- background-color: #3c414a;
|
|
|
- }
|
|
|
- a.leaflet-bar-part {
|
|
|
- background-color: #3c414a;
|
|
|
- border-radius: 4px;
|
|
|
- box-shadow: none;
|
|
|
- overflow: hidden;
|
|
|
- div {
|
|
|
- border-color: var(--color-neutral-1) !important;
|
|
|
- div {
|
|
|
- background-color: var(--color-neutral-1) !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/* 示例：将所有地图图片的颜色反转 */
|
|
|
-.dark-mode img:not(.leaflet-marker-icon) {
|
|
|
- filter: invert(1) hue-rotate(170deg);
|
|
|
-}
|
|
|
-// 防止暗黑模式下地图超出容器
|
|
|
-.tracking-map {
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-// 修改暗黑模式下的背景色
|
|
|
-.leaflet-container.dark-mode,
|
|
|
-.leaflet-map-pane.dark-mode,
|
|
|
-.leaflet-tile-container.dark-mode {
|
|
|
- background-color: #2b2f36;
|
|
|
-}
|
|
|
-// 处理版权信息在切换模式后样式错误bug
|
|
|
-.leaflet-right .leaflet-control-attribution {
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
- margin: 0 4px 4px 0;
|
|
|
- color: #2b2f36;
|
|
|
- span {
|
|
|
- font-size: 12px;
|
|
|
- color: #2b2f36;
|
|
|
- }
|
|
|
- a {
|
|
|
- color: #0078a8;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
/* 示例：将所有地图图片的颜色反转 */
|
|
|
@@ -457,4 +403,4 @@ onUnmounted(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
AmandaG