小编phi*_*777的帖子

Vue.js:Leaflet-Marker 不可见

我正在使用 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>
Run Code Online (Sandbox Code Playgroud)

我的应用程序看起来像这样(App.vue):

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

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

export default {
  name: 'app', …
Run Code Online (Sandbox Code Playgroud)

leaflet vue.js vuejs2

3
推荐指数
2
解决办法
4413
查看次数

标签 统计

leaflet ×1

vue.js ×1

vuejs2 ×1