blob: 329faf1f4d33989a51e6688d6958bb0b2278d508 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<html>
<head>
<link rel="stylesheet" href="//unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<div id="app">
<l-map :zoom="zoom" :center="center">
<l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></l-tile-layer>
<l-marker :lat-lng="center"></l-marker>
</l-map>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/vue2-leaflet@2.7.1/dist/vue2-leaflet.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
components: {
'l-map': window.Vue2Leaflet.LMap,
'l-tile-layer': window.Vue2Leaflet.LTileLayer,
'l-marker': window.Vue2Leaflet.LMarker,
},
data: {
center: [50.3342, 10.2114],
zoom: 14,
},
mounted () {
if ('geolocation' in window.navigator) {
navigator.geolocation.getCurrentPosition((pos) => {
this.center = [pos.coords.latitude, pos.coords.longitude];
});
}
},
});
</script>
</body>
</html>
|
