使用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>

- hexstonedev

---

可能是在axios异步调用完成之前就调用了mounted()方法。您需要稍微改变逻辑，使地图在axios完成时而不是在挂载时创建。 - PA.

我尝试将axios调用直接放在created()中。根据生命周期图表，created在mounted之前运行。不太确定这里发生了什么。 - hexstonedev

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

所以您需要在 axios.then() 调用中初始化地图。 - PA.

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;
 ...

- PA.

---

这应该是比我的答案更好的选择。非常易于理解，而且还保持了与 API 的兼容性。 - Kristof Gilicze

谢谢PA。非常有帮助。 - hexstonedev

Answer 2

在数据可用时创建地图（当axios promise成功时）。

更多关于promises的内容：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>

- Kristof Gilicze

---

很高兴这对您有所帮助！PA的答案更详细，同时保持API兼容性，请选择那个。 - Kristof Gilicze