poi search

ZhAkps

2024-02-06 1eab2b76a58308c7947447aae0e08135820d59ab

poi search

 src/components/poplayer/main2.vue

@@ -1,12 +1,12 @@
<template>
  <div v-if="state.show">
      <poplayer :list="list" />
      <poplayer :list="state.list" />
  </div>
</template>

<script>
import poplayer from "./poplayer2.vue";
import store from "@/utils/store";
import store from "@/utils/store2";
export default {
  name: "Main",
  components: {
@@ -18,6 +18,7 @@
    };
  },
  mounted() {
    console.log('popuplayer mounted');
  },
};
</script>

 src/components/poplayer/poplayer2.vue

@@ -42,20 +42,24 @@
  },
  watch: {
    "state.list": function (val) {
      console.log('state.list');
      this.KEY = keys[val.POITYPE];
      console.log(this.state.list);
      console.log(this.list1);
      console.log(this.KEY);
    },
  },
  methods: {
    closehandle() {
      if (window.pickFeature && window.pickFeature.primitive) {
        window.pickFeature.primitive.image = window.imgUrl;
        window.pickFeature = null;
      }
      // if (window.pickFeature && window.pickFeature.primitive) {
      //   window.pickFeature.primitive.image = window.imgUrl;
      //   window.pickFeature = null;
      // }
      store.setPoplayerListAction({});
      divPoint3 && divPoint3.deleteObject();
      // divPoint3 && divPoint3.deleteObject();
      store.setPoplayerShowAction(false);
      if (window.tdglLine) {
        sgworld.Creator.DeleteObject(window.tdglLine);
        window.map.removeLayer(window.tdglLine);
        window.tdglLine = null;
      }
    },

 src/components/viewer2.vue

@@ -3,15 +3,6 @@
    <!-- openlayer -->
    <div id="openlayerContainer" @click="clicktoclose"></div>

    <div id="ponitPanel">
      <div id="ponitPanel-close" @click.stop="closehandle"></div>
      <div class="title">点位详情</div>
      <div id="ponitPanel-content">

      </div>

    </div>

    <!-- 页面标题 -->
    <div class="titleBg">
      <img src="@/assets/img/title/title.png" />

 src/utils/map2.js

@@ -2349,7 +2349,7 @@
                                        rjl,
                                        jzxg,
                                        jzmd,
                                        lon:e.coordinate[0],
                                        lon: e.coordinate[0],
                                        lat: e.coordinate[1],
                                    }
                                }
@@ -2368,7 +2368,6 @@

        window.map.forEachFeatureAtPixel(e.pixel, function (feature) {
            if (feature && feature.values_.desc) {
                ponitPanel.style.display = 'block'
                let obj = feature.values_.desc
                objdata = {
                    POITYPE: "POINT",
@@ -2377,18 +2376,15 @@
                    lon: obj.lng,
                    lat: obj.lat
                }
                overlay.setPosition(e.coordinate);
                console.log('objdata');
                store.setPoplayerShowAction(true);
                store.setPoplayerListAction(objdata);
                // if (window.instance) {
                //     window.instance.$destroy();
                // }
                // window.instance = new PoiLayerConstructor({
                //     data: {
                //         list: objdata
                //     }
                // });
                // window.instance.$mount();
                window.instance = new PoiLayerConstructor({
                    data: {
                        list1: objdata
                    }
                });
                window.instance.$mount();
            }
        });
    }

 src/utils/poiKeys.js

@@ -44,8 +44,8 @@
    },
    'POINT': {
        名称: 'name',
        // 经度: 'lon',
        // 纬度: 'lat',
        经度: 'lon',
        纬度: 'lat',
        地址: 'address'
    }
}