2

当我尝试将 LayerGroup 添加到我的地图时遇到问题（为了进行传单控制搜索，按城市搜索）。我不知道它为什么会失败，但我怀疑它返回一个未定义的或类似的东西。我对传单还很陌生，所以我不确定这是否是真正的问题。

我正在为地图使用 vue-leaflet，所以这里有代码。

HTML：

<template>
  <div id="actingMapDiv" class = "vh-100 d-flex justify-content-center align-items-center">

    <div style="height: 900px; width: 90%" class = "map d-flex flex-column justify-content-center align-items-center">
      <h2>Check in our map the situation of requests in your area</h2>
      <div class = "void05"></div>

      <l-map ref="map" 
        v-if="showMap"
        :zoom="zoom"
        :center="center"
        :options="mapOptions"
        style="height: 80%"
        @update:center="centerUpdate"
        @update:zoom="zoomUpdate"

        class = "d-flex flex-column justify-content-center align-items-center"
      >
        <l-tile-layer :url="url" :attribution="attribution" />
      </l-map>
      </div>
    </div>
</template>

剧本：

<script>

import { latLng } from "leaflet";
import { LMap, LTileLayer } from "vue2-leaflet";

import L from 'leaflet';

export default {
  name: "Example",
  components: {
    LMap,
    LTileLayer
  },
  data() {
    return {
      zoom: 8,
      center: latLng(42.886027, -7.970126),
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      mapOptions: {
        zoomSnap: 0.5
      },
      showMap: true
    };
  },


  methods: {
    zoomUpdate(zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate(center) {
      this.currentCenter = center;
    }
  },

  mounted: function() {
    var map = this.$refs.map;

    console.log("My Map", map);
    console.log("L", L);

    var searchLayer = L.layerGroup().addTo(map);
    map.addControl( new L.Control.Search({layer: searchLayer}) );
  }
}
</script>

控制台错误：

TypeError: "t is undefined"
    addLayer leaflet-src.js:6665
    addLayer LMap.js:357
    addTo leaflet-src.js:6559
    mounted actingMapPage.vue:74
    VueJS 12

这里重定向到这一行：

var searchLayer = L.layerGroup().addTo(map);

修复后：

添加了这些导入：

import 'leaflet-search';
import "leaflet-search/dist/leaflet-search.src.css";

并使用了非常好的答案给出的修复：

mounted: function() {
    var map = this.$refs.map.mapObject;

    var searchLayer = L.layerGroup().addTo(map);
    map.addControl( new L.Control.Search({layer: searchLayer}));
  }
4

1 回答 1

0

至少有一个问题是vue2-leaflet的时候，需要使用mapObject

所以你应该这样做：

var map = this.$refs.map.mapObject; // HERE!
var searchLayer = L.layerGroup().addTo(map);
map.addControl(new L.Control.Search({layer: searchLayer}));

然后确保您已为leaflet-search.

希望它能解决您的问题！

于 2020-06-04T18:34:22.910 回答