我只是尝试使用Vue Leaflet并尝试使用此example。但是当我在本地服务器上尝试时，地图顺序错误。

这是我的代码

<template>
  <div class="home">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
      <l-polygon v-for="s in shapes"
                   :key="s.id"
                   :color="s.color"
                   :lat-lngs="s.geometry.coordinates"
                   @l-mouseover=change_color(s)
                   >
        </l-polygon>
    </l-map>
  </div>
</template>

<script>
import { LMap,LPolygon,LTileLayer } from 'vue2-leaflet'
export default {
  components: { LMap,LTileLayer },name: 'home',data () {
    return {
      zoom: 7,center: [47.413220,-1.219482],url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',shapes: [
        {
          id: 'my_id',color: '#3388ff',geometry: {
            coordinates: [
              [[[47,-1],[47,0],[48,-1]]]
            ]
          }
        }
      ]
    }
  },methods: {
    change_color (shape) {
      shape.color = '#ee0000'
    }
  }
}
</script>

我不知道发生了什么。有任何想法吗？谢谢。