全局搜索优化

src/components/Map/index.vue

@@ -51,8 +51,6 @@ import {
 import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import ElementResizeDetectorMaker from 'element-resize-detector';
 import useAppStore from '@/store/modules/app';
-import { getRoadVideoList } from "@/api/globalMap/layerAnalysis";
-
 interface Props {
   activeMap: string;
   pointType: PointType[];
@@ -87,7 +85,7 @@ const mapState = reactive({
   showScale: true
 });
 
-let AMap, map, scale;
+let AMap, map, scale, placeSearch;
 
 // 鼠标绘制工具
 const drawTool = useDrawTool();
@@ -112,6 +110,12 @@ const mapUtils = useAMap({
     } else {
       map.removeLayer();
     }
+    placeSearch = new AMap.PlaceSearch({
+      pageSize: 30,
+      pageIndex: 1,
+      city: '0668',
+      extensions: 'base'
+    });
     map.on('zoomchange', zoomChangeHandler);
     // 添加遮罩
     // , { strokeColor: '#ff0000',strokeWeight: 2, offset }
@@ -446,8 +450,10 @@ const setCenter = (item) => {
 const getMapUtils = () => {
   return mapUtils;
 };
-
-defineExpose({ addMarker, addSearchMarker, setCenter, getMarkers, clearMarker, getMap, drawTool, handleHover, trackPlayback, getMapUtils });
+const getPlaceSearch = () => {
+  return placeSearch;
+};
+defineExpose({ addMarker, addSearchMarker, setCenter, getMarkers, clearMarker, getMap, drawTool, handleHover, trackPlayback, getMapUtils, getPlaceSearch });
 const handleResize = () => {
   const containerWidth = containerRef.value.clientWidth * containerScale().scaleX;
   const containerHeight = containerRef.value.clientHeight * containerScale().scaleY;

src/hooks/AMap/useAMap.ts

@@ -16,7 +16,7 @@ export function useAMap(options) {
       version: !!options.version ? options.version : '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: options.plugins
         ? options.plugins
-        : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation', 'AMap.Driving', 'AMap.Geocoder']
+        : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation', 'AMap.Driving', 'AMap.Geocoder', 'AMap.PlaceSearch']
     }).then((res) => {
       AMap = res;
       map = new AMap.Map(options.el ? options.el : 'aMap', {

src/views/globalMap/LeftMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="menu-container">
     <div class="search-box">
-      <input v-model="searchState.searchText" class="input" @input="changeSearchText" @keyup.enter="changeSearchText" />
+      <input v-model="searchState.searchText" class="input" @keyup.enter="changeSearchText" />
       <div v-show="searchState.showList" class="search-content">
         <div class="search-title">全局搜索</div>
         <div class="search-sub-content">
@@ -138,6 +138,7 @@ import { getPointInfoComprehensiveSearch } from '@/api/globalMap';
 import { listMenu } from '@/api/system/menu';
 
 const emits = defineEmits(['switchMap', 'clickMenu', 'selectSearchMarker']);
+const getPlaceSearch = inject('getPlaceSearch');
 // 左侧菜单
 let menuData = ref([]);
 
@@ -160,10 +161,25 @@ const changeSearchText = () => {
       keyword: searchState.searchText
     }).then((res) => {
       searchState.showList = true;
-      searchState.resultList = res.data.add_data;
       searchState.layerList = res.data.point_data;
       searchState.videoList = res.data.video_data;
     });
+    getPlaceSearch().search(searchState.searchText, (status, result) => {
+      if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
+        let arr = [];
+        const pois = result.poiList.pois;
+        arr = pois.map((item) => {
+          return {
+            dataType: 'search',
+            name: item.name,
+            address: item.address,
+            longitude: item.location.lng,
+            latitude: item.location.lat
+          };
+        });
+        searchState.resultList = arr;
+      }
+    });
   }
 };
 

src/views/globalMap/index.vue

@@ -249,6 +249,14 @@ const getMarkers = () => {
   }
   return {};
 };
+const getPlaceSearch = () => {
+  if (['imageMap', 'satellite2', 'satellite3'].includes(activeMap.value)) {
+    return map2Ref.value.getPlaceSearch();
+  } else if (['vectorgraph', 'satellite'].includes(activeMap.value)) {
+    return mapRef.value.getPlaceSearch();
+  }
+  return {};
+};
 const trackPlayback = (data) => {
   if (['imageMap', 'satellite2', 'satellite3'].includes(activeMap.value)) {
     return map2Ref.value.trackPlayback(data);
@@ -320,6 +328,7 @@ provide('trackPlayback', trackPlayback);
 provide('showDetail', showDetail);
 provide('getDrawTool', getDrawTool);
 provide('getMarkers', getMarkers);
+provide('getPlaceSearch', getPlaceSearch);
 </script>
 
 <style lang="scss" scoped>