0

我是 Vue 新手，正在使用 vue2-leaflet 开发地图应用程序。我想在我的应用程序中添加一个搜索框以在我的地图上定位标记，我发现这个传单插件传单搜索正是我正在寻找的功能，但我不知道如何将它集成到我的 vue cli项目。

安装插件后，如何将其导入到我的 vue 组件中？并且，我<script>应该在哪里添加代码？

这是我要添加搜索框的组件的样子：

<template>
<body>
  <l-map class="map" ref="map" :min-zoom="minZoom" :crs="crs">
    <l-tile-layer :url="url"></l-tile-layer>
    <l-grid-layer class="grid" :tile-component="tileComponent"></l-grid-layer>
    <l-marker v-for="(newCoords, i) in InvertedCoords" :key="i" :lat-lng="newCoords">
      <div v-if="stars[i].status === 'ALLY'">
        <l-icon ></l-icon>
      </div>
      <div v-else>
        <l-icon></l-icon>
      </div>
      <l-popup class="popup">
        <em class="popup-bold">Name: </em>{{ stars[i].name }}<br />
        <em class="popup-bold">Longitud: </em>{{ stars[i].lng }}<br />
        <em class="popup-bold">Latitud: </em>{{ stars[i].lat }}<br />
      </l-popup>
    </l-marker>
  </l-map>
</body>
</template>

<script>
import L from "leaflet";
import { CRS } from "leaflet";
import GridTemplate from './GridTemplate.vue';
import { eventBus } from '../main.js'
import {
  LMap,
  LTileLayer,
  LMarker,
  LPopup,
  LPolyline,
  LIcon,
} from "vue2-leaflet";

export default {
  name: "Map",
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LImageOverlay,
    LPopup,
    LIcon,
  },
  props: {
    msg: {
      type: String
    }
  },
  data() {
    return {
      url:  "",
      bounds: [  [-2600, -2700],  [1000, 3000] ],
      minZoom: 0,
      crs: L.CRS.Simple,
      stars: [],
      messageList: [],
      tileComponent: GridTemplate
    };
  },
  computed: {
    InvertedCoords() {
      var newArraw = [];
      for (let i = 0; i < this.stars.length; i++) {
        newArraw[i] = {
          id: i + 2,
          lat: this.stars[i].lat * -1,
          lng: this.stars[i].lng * -1
        };
      }
      return newArraw;
      console.log(newArraw);
    }
  },

  watch: {
    msg: function() {
      this.messageList.push(this.msg);
    }
  },

  mounted() {
    this.$refs.map.mapObject.setView([552, 40], 1);

    this.$http.get("url")
        .then(response => {
          return response.json();
        })
      .then(data => {
        const resultArray = [];
        for (let key in data) {
          resultArray.push(data[key]);
        }
        this.stars = resultArray;
      });

  methods: {
    inverted() {
      for (let i = 0; i < this.newArraw.length; i++) {
        console.log(this.newArraw[i]);
        return this.newArraw[i];
      }
    },
    updateStars(text) {
      this.$http.get("url")
        .then(response => {
          return response.json();
        })
      .then(data => {
        const resultArray = [];
        for (let key in data) {
          resultArray.push(data[key]);
        }
        this.stars = resultArray;
      });
    },
    StarsData() {
      eventBus.$emit('i-got-clicked', this.stars)
    },
    
  }
};
</script>

<style scoped>

</style>
4

1 回答 1

1

我不知道你的插件，但我用过gesearch。

这是我为注册传单插件所做的。

import { OpenStreetMapProvider } from "leaflet-geosearch";
import "leaflet-geosearch/assets/css/leaflet.css";
import { GeoSearchControl } from "leaflet-geosearch";

然后在mounted()我可以将它注册到传单。您可以查看如何注册控件的文档。

mounted() {
  const map = this.$refs.map.mapObject;
  const searchControl = new GeoSearchControl({
    provider,
    // ... some more options
  });
  map.addControl(searchControl);
}

也许这对你有帮助。

于 2020-06-30T20:50:28.200 回答