Question

我将vue.js与Leaflet一起使用。遗憾的是，地图上的标记不可见，但标记的工具提示是可见的。 The location of the marker is set to London. 地图是一个组件（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中输入png？

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

我也有同样的问题。自定义标记无法正确显示（其他所有方法都可以）。就像我可以使用工具提示/弹出窗口一样，因此标记是可选的但不可见。现在，我通过直接在组件中导入png来解决它。如果可以的话。

Map.vue组件

模板

<l-marker>
    <l-icon :icon-url="customMarker"></l-icon>
</l-marker>

和脚本中

import L from 'leaflet';
import {
    LMarker
    LIcon
} from 'vue2-leaflet';

// this is what was missing
import customMarker from '../yourDirectory/customMarker.png'

    // The following is the official VueLeaflet fix
    // to solve issue with default marker icon missing (webpack messing around)
    // https://vue2-leaflet.netlify.app/quickstart/#marker-icons-are-missing

    import {
        Icon
    } from 'leaflet';

    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'),
    });
    // End of fix

export default {
    data() {
          customMarker
    }
}

Answer 3

我遇到了类似的问题，为了解决它，我遵循了很多教程，但没有结果

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。在所需的自定义图片前使用“要求”

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

我希望这会对某人有所帮助：）

Vue.js：Leaflet-Marker不可见

3 个答案: