|
|
@@ -2,11 +2,6 @@
|
|
|
<div class="map-wrapper">
|
|
|
<div ref="mapContainer" class="map-container"></div>
|
|
|
|
|
|
- <div class="map-search-bar" :style="privateStyle.search">
|
|
|
- <input v-model="searchKey" type="text" placeholder="请输入路段或设备名称" @keyup.enter="handleSearch" />
|
|
|
- <button @click="handleSearch">查询</button>
|
|
|
- </div>
|
|
|
-
|
|
|
<div class="map-legend" :style="privateStyle.legend">
|
|
|
<div class="legend-title">图例</div>
|
|
|
<div class="legend-list">
|
|
|
@@ -45,10 +40,7 @@ export default {
|
|
|
infoWindow: null,
|
|
|
routeGroups: {},
|
|
|
polylines: [],
|
|
|
- searchKey: '',
|
|
|
- placeSearch: null,
|
|
|
privateStyle: {
|
|
|
- search: {},
|
|
|
legend: {}
|
|
|
},
|
|
|
activeLegends: ["中心计划", "干线协调", "勤务路线", "定周期控制", "感应控制", "自适应控制", "手动控制", "特殊控制", "离线", "降级", "故障"],
|
|
|
@@ -73,7 +65,6 @@ export default {
|
|
|
|
|
|
// 自定义首页地图搜索和图例位置样式
|
|
|
if (this.$route.path === '/home') {
|
|
|
- this.privateStyle.search = { top: "100px", left: "25%" };
|
|
|
this.privateStyle.legend = { right: "25%" };
|
|
|
}
|
|
|
},
|
|
|
@@ -97,7 +88,7 @@ export default {
|
|
|
this.AMap = await AMapLoader.load({
|
|
|
key: this.amapKey,
|
|
|
version: "2.0",
|
|
|
- plugins: ['AMap.Driving', 'AMap.GeometryUtil', 'AMap.PlaceSearch'] // 必须有这个
|
|
|
+ plugins: ['AMap.Driving', 'AMap.GeometryUtil']
|
|
|
});
|
|
|
|
|
|
this.map = new this.AMap.Map(this.$refs.mapContainer, {
|
|
|
@@ -106,43 +97,10 @@ export default {
|
|
|
center: [116.663, 39.905],
|
|
|
});
|
|
|
|
|
|
- // 关键:在这里初始化,确保 search 方法可用
|
|
|
- this.placeSearch = new this.AMap.PlaceSearch({
|
|
|
- map: this.map,
|
|
|
- pageSize: 1,
|
|
|
- autoFitView: true
|
|
|
- });
|
|
|
-
|
|
|
this.map.on('complete', () => this.drawStaticRoutes());
|
|
|
} catch (err) { console.error('地图初始化失败', err); }
|
|
|
},
|
|
|
|
|
|
- // 搜索功能实现
|
|
|
- handleSearch() {
|
|
|
- if (!this.searchKey) return;
|
|
|
-
|
|
|
- // 1. 逻辑优先:搜索本地设备名称
|
|
|
- const foundLegend = this.legendConfig.find(item =>
|
|
|
- item.name.includes(this.searchKey)
|
|
|
- );
|
|
|
-
|
|
|
- if (foundLegend) {
|
|
|
- // 如果搜到了图例中的路段,直接定位到该路段起点并打开图例
|
|
|
- if (!this.activeLegends.includes(foundLegend.name)) {
|
|
|
- this.toggleRouteVisible(foundLegend.name);
|
|
|
- }
|
|
|
- this.map.setZoomAndCenter(15, foundLegend.start);
|
|
|
- } else {
|
|
|
- // 2. 逻辑兜底:调用高德地点搜索 API
|
|
|
- this.placeSearch.search(this.searchKey, (status, result) => {
|
|
|
- console.log('result => ', result);
|
|
|
- if (status !== 'complete') {
|
|
|
- console.warn('未找到相关位置');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
drawStaticRoutes() {
|
|
|
const AMap = this.AMap;
|
|
|
|
|
|
@@ -579,47 +537,4 @@ export default {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
}
|
|
|
-
|
|
|
-/* 搜索框容器 */
|
|
|
-.map-search-bar {
|
|
|
- position: absolute;
|
|
|
- top: 55px;
|
|
|
- left: 50px;
|
|
|
- z-index: 100;
|
|
|
- display: flex;
|
|
|
- background: rgba(7, 21, 43, 0.9);
|
|
|
- border: 1px solid #1e4d8e;
|
|
|
- padding: 4px;
|
|
|
- border-radius: 4px;
|
|
|
- box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
|
|
|
-}
|
|
|
-
|
|
|
-.map-search-bar input {
|
|
|
- width: 200px;
|
|
|
- background: transparent;
|
|
|
- border: none;
|
|
|
- color: #fff;
|
|
|
- padding: 8px 12px;
|
|
|
- outline: none;
|
|
|
- font-size: 13px;
|
|
|
-}
|
|
|
-
|
|
|
-.map-search-bar input::placeholder {
|
|
|
- color: #5b7da8;
|
|
|
-}
|
|
|
-
|
|
|
-.map-search-bar button {
|
|
|
- background: #1e4d8e;
|
|
|
- color: #fff;
|
|
|
- border: none;
|
|
|
- padding: 0 15px;
|
|
|
- cursor: pointer;
|
|
|
- border-radius: 2px;
|
|
|
- transition: background 0.3s;
|
|
|
- font-size: 13px;
|
|
|
-}
|
|
|
-
|
|
|
-.map-search-bar button:hover {
|
|
|
- background: #32c5ff;
|
|
|
-}
|
|
|
</style>
|