使用 Leaflet 和 Vue.js 创建地图

Question

我正在尝试使用 Leaflet 和 Vue 组件创建地图。出于某种原因，“中心：”属性不接受我的纬度和经度数组坐标？当我在模板 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时，偶然检查数据是否已经可用，如果没有，设置创建地图的标志

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

Answer 2

数据可用时创建 Map（当 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>