Vue2-传单标记不显示

Question

<template>
  <l-map
    style='height: 500px'
    :center='center'
    :zoom='zoom'
  >
    <l-tile-layer
      :url='url'
      :attribution='attribution'
    >
      <l-marker :lat-lng="test">
        <l-tooltip :options="{ permanent: true, interactive: true }">
          <div>
            I am a tooltip
          </div>
        </l-tooltip>
      </l-marker>
    </l-tile-layer>
  </l-map>
</template>

<script>
import L from 'leaflet';
import {
  LMap, LTileLayer, LMarker, LTooltip,
} from 'vue2-leaflet';

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

export default {
  data() {
    return {
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      center: L.latLng(47.41322, -1.219482),
      test: L.latLng(47.41322, -1.219482),
      zoom: 12,
      userLocation: false,
      userCoords: false,
    };
  },
  mounted() {
    if (!('geolocation' in navigator)) {
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        this.userCoords = L.latLng(pos.coords.latitude, pos.coords.longitude);
        this.userLocation = true;
        this.center = this.userCoords;
      },
      (err) => {
        console.log(err);
      },
    );
  },
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LTooltip,
  },
};
</script>

这是我的代码，目前标记和工具提示根本没有显示。控制台未显示任何错误，我不知道该怎么做。

根据文档，存在标记未显示的问题，但从我读过的其他问题来看，标记似乎是不可见的，如果标记不可见，popup/tooltip 仍会显示。我什么也没得到，看不到代码有问题。

我也尝试过使用自定义标记图像，但结果相同。没有

Answer 1

Marker 组件不应该是 Tile Layer 的子组件，如 Vue2-Leaflet 的示例所示，而是 Map（或 Layer Group）的子组件：

https://vue2-leaflet.netlify.app/examples/simple.html

    <l-map
      :zoom="zoom"
      :center="center"
    >
      <l-tile-layer
        :url="url"
        :attribution="attribution"
      />
      <l-marker :lat-lng="withTooltip">
        <l-tooltip>
          <div>
            I am a tooltip
          </div>
        </l-tooltip>
      </l-marker>
    </l-map>

Vue2-传单标记不显示

Vue2-leaflet marker not showing

javascript

vuejs2

leaflet

vue2leaflet