我正在使用 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: '© <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)