首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在Vue 2中使用leaflet+mapbox tiles会导致试图读取lat时出错

在Vue 2中使用leaflet+mapbox tiles会导致试图读取lat时出错
EN

Stack Overflow用户
提问于 2022-06-30 00:04:03
回答 1查看 187关注 0票数 1

我在https://github.com/ericg-vue-questions/leaflet-test有一个样例项目

我正在学习用Vue和传单构建交互式地图教程。

相关的代码是:

代码语言:javascript
复制
<template>
  <div id="container">
    <div id="mapContainer"></div>
  </div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
//
// obtain a mapbox token from https://account.mapbox.com/access-tokens/
// and then create token.js in ./src/components with the following content:
//
//    const token = "<your token>";
//    export { token };
//
import {token} from "./token.js";

export default {
  name: "Map",

  data() {
    return{
      center: [37,7749, -122,4194]
    }
  },

  methods: {
    setupLeafletMap: function () {
      const mapDiv = L.map("mapContainer").setView(this.center, 13);
      L.tileLayer(
        `https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=${token}`,
        {
          attribution: 'Map data (c) <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>',
          maxZoom: 18,
          id: "mapbox/streets-v11",
          accessToken: `${token}`,
        }
      ).addTo(mapDiv);
    },
  },

  mounted() {
    this.setupLeafletMap();
  },
};
</script>

<style scoped>
  #mapContainer {
    width: 500px;
    height: 500px;
  }
</style>

据我所知,这应该足以开始显示地图块。

当代码被执行时,它会导致错误:

代码语言:javascript
复制
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of null (reading 'lat')"

found in

---> <Map> at src/components/LeafletTest.vue
       <HelloWorld> at src/components/HelloWorld.vue
         <App> at src/App.vue
           <Root>

TypeError: Cannot read properties of null (reading 'lat')
    at Object.project (leaflet-src.js?e11e:1685:1)
    at Object.latLngToPoint (leaflet-src.js?e11e:1522:1)
    at NewClass.project (leaflet-src.js?e11e:3949:1)
    at NewClass._getNewPixelOrigin (leaflet-src.js?e11e:4472:1)
    at NewClass._move (leaflet-src.js?e11e:4191:1)
    at NewClass._resetView (leaflet-src.js?e11e:4153:1)
    at NewClass.setView (leaflet-src.js?e11e:3175:1)
    at VueComponent.setupLeafletMap (LeafletTest.vue?232a:30:1)
    at VueComponent.mounted (LeafletTest.vue?232a:44:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)

我不知道哪里出了问题,也不知道该如何解决。我需要更改什么才能加载地图块。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-30 07:53:25

你必须使用浮标作为拉长。

喜欢:center: [37.7749, -122.4194]

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72809038

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档