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

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

呼叫的顺序是可能这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 成功时）创建 Map 。

更多关于承诺： 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>