使用 Leaflet & Vue 创建地图.js

Question

我正在尝试使用 Leaflet 和 Vue 组件创建地图。由于某种原因，"center："属性不接受我的纬度和经度数组坐标？当我在模板 html {{ latlng }} 中使用它时，我得到了一个具有正确坐标的数组。任何帮助将不胜感激。

<template>
<div id="mapContainer">{{ latlng }}</div>
</template>
<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import axios from 'axios';

export default {
name: "Map",
data() {
return {
map: null,
latlng: []
};
},
methods: {
get_lat_lng: function(){
axios.get('http://127.0.0.1:5000/api/get_latitude')
.then(res => this.latlng.push(res.data))
axios.get('http://127.0.0.1:5000/api/get_longitude')
.then(res => this.latlng.push(res.data))
}
},
created: function(){
this.get_lat_lng()
},
mounted() {
this.map = L.map("mapContainer", {
center: this.latlng,
zoom: 12,
});
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
},
beforeDestroy() {
if (this.map) {
this.map.remove();
}
}
};
</script>
<style scoped>
#mapContainer {
width: 50vw;
height: 50vh;
}
</style>

Answer 1

您在此处遇到了竞争条件。mounted()挂钩在异步调用完成之前调用axios.get。

调用的顺序可能是这个 1。created()， 2.mounted()， 3.axios.then()

因此，您需要稍微更改逻辑，以便在创建完成并调用挂载钩子时初始化映射。

像这样的东西，

为已执行的挂载调用添加标志

data() {
return {
map: null,
mounted: false,
latlng: null
}

将地图创建代码移动到方法

createMap: function() {
this.map = L.map("mapContainer", { center: this.latlng ...

创建时获取数据，如果已经挂载，则创建地图

created(){
axios.all([axios.get('http://127.0.0.1:5000/api/get_longitude');
axios.get('http://127.0.0.1:5000/api/get_latitude')])
.then((longresp,latresp)=> {
this.latlng=[latresp.data,longresp.data];
if (this.mounted) this.createMap()
})

然后在挂载时，检查数据是否已经可用，如果没有，则设置用于创建地图的标志

mounted() {
if (this.latlng) this.createMap()
this.mounted = true;
...

Answer 2

当数据可用时(当 axios promise 成功时(创建映射。

更多关于承诺的信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

使用指示器，直到内容未准备好。

我认为不需要单独的请求，所以我合并了 2 个 axios 请求。后端应返回 [lat， long] 数组。

<template>
<div>
<!--
I also added a simple loading indicator,
obviously you can go for something more fancy like a spinner
--!>
<p v-if="loading">Loading...</p>
<div id="mapContainer">{{ latlng }}</div>
</div>
</template>
<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import axios from 'axios';
export default {
name: "Map",
data() {
return {
map: null,
loading: false,
latlng: []
};
},
methods: {
setupLeafletMap: function () {
this.map = L.map("mapContainer", {
center: this.latlng,
zoom: 12,
});
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(this.map);
}
},
mounted() {
this.loading = true;
axios.get('http://127.0.0.1:5000/api/get_latlng').then(res => {
this.latlng = res.data;
this.setupLeafletMap();  // Creating the Map here ensures that data is already loaded from server side
this.loading = false;
}).catch(error => console.error(error));
},
beforeDestroy() {
if (this.map) {
this.map.remove();
}
}
};
</script>
<style scoped>
#mapContainer {
width: 50vw;
height: 50vh;
}
</style>