Vue.js: 리플릿 마커가 표시되지 않음

Vue.js: 리플릿 마커가 표시되지 않음

vue.js를 리플릿과 함께 사용하고 있습니다.아쉽게도 지도의 마커는 표시되지 않지만 마커의 툴팁은 표시됩니다.마커의 위치는 런던으로 설정됩니다.맵은 컴포넌트(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>

뭐가 문제인지 정말 모르겠어요.

메인.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 }
});

저도 비슷한 문제가 있어서 해결하기 위해 많은 튜토리얼을 따라 했지만 아무 결과도 없었습니다.

https://leafletjs.com/examples/custom-icons/ https://korigan.github.io/Vue2Leaflet/ #/컴포넌트/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]
      })
    };
  }

이것이 누군가에게 도움이 되기를 바랍니다:)

저도 같은 문제가 있었어요.커스텀 마커가 올바르게 표시되지 않는다(다른 모든 것은 동작했다).툴팁/팝업을 할 수 있는 것처럼 마커는 선택 가능하지만 보이지 않습니다.이제 png를 컴포넌트에 직접 Import하여 해결했습니다.혹시 도움이 될지도 모르니까

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
    }
}

언급URL : https://stackoverflow.com/questions/50864855/vue-js-leaflet-marker-is-not-visible