Vue.js：Leaflet-Marker 不可见

Question

我正在使用 vue.js 和 Leaflet。不幸的是，地图上的标记不可见，但标记的工具提示可见。 标记的位置设置为伦敦。 地图是一个组件（Map.vue）：

<template>
  <div></div>
</template>

<script>
  import L from 'leaflet';
  import 'leaflet/dist/leaflet.css';


  export default {
    name: 'test-map',
    mounted () {
      var map = L.map(this.$el).setView([51.5076, -0.1276], 4);
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: ['a','b','c']
      }).addTo(map);

      var loc = [51.5076, -0.1276];
      var marker = L.marker(loc).addTo(map);
      marker.bindTooltip("Here is the marker");
    }
  }
</script>

<style scoped>
  div {
    height: 100%;
  }
</style>

我的应用程序看起来像这样（App.vue）：

<template>
  <div id="app">
    <test-map></test-map>
  </div>
</template>

<script>
import TestMap from './components/Map.vue'

export default {
  name: 'app',
  components: {
    TestMap
  }
}
</script>

<style scoped>
  #app {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>

我真的不知道怎么了。

Answer 1

似乎您必须在 main.js 中要求 pngs ？

import Vue from 'vue'
import App from './App'

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'),
});

new Vue({
  el: '#main',
  template: '<App/>',
  components: { App }
});

Answer 2

我有一个类似的问题，我跟着很多教程来解决它，但没有结果

https://leafletjs.com/examples/custom-icons/ https://korigan.github.io/Vue2Leaflet/#/components/l-icon/

对于我的情况（使用本地安装的组件），解决方案包括两个步骤：

1. 放置这些代码：

import { Icon }  from 'leaflet'
import 'leaflet/dist/leaflet.css'

// this part resolve an issue where the markers would not appear
delete Icon.Default.prototype._getIconUrl;

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')
});

2.在需要的自定义图片前使用“require”

 data: function() {
    return {
      icon: L.icon({
        iconUrl: require("relative_or_absolute_path"),
        iconSize: [38, 95],
        iconAnchor: [22, 94]
      })
    };
  }

我希望这会帮助某人:)