Api Vue warn]：渲染时出错："；TypeError:无法读取属性'；地图'；“未定义”的定义；Vue谷歌地图

我有一个简单的vue项目，它从我的API调用数据

有一个谷歌地图，我需要连接和显示标记从lat和长期检索从数据库通过API

我已启用Axios for vue，但Axios函数给了我一个错误

vue.runtime.esm.js？2b0e:619[vue warn]：渲染中出错：“TypeError: 无法读取未定义“”的属性“映射”

文件：GoogleMap.vue

搜索并添加pin


你好，世界！

从“axios”导入axios；
从“vue2谷歌地图”导入{gmapApi}；
导出默认值{
名称：“谷歌地图”，
数据（）{
返回{
//地图-入口点
选项：{
缩放：12，
中心：{
纬度：6.9271，
长：79.8612，
},
mapTypeId:“路线图”，
},
信息标记：空，
信息窗口：{
纬度：39.9995601，
长：-75.1395161，
},
窗口打开：错误，
};
},
安装的（）{
这是初始化（）；
让配置={
方法：“获取”，
url:“http://127.0.0.1:8002/api/locations/",
};
axios（配置）。然后（（val）=>{
this.Data=val.Data；
});
},
计算：{
谷歌：GMAPPI，
标记（）{
返回此.Data.map(
（位置名称、横向、纵向）=>({
地点名称，
职位：拉丁美洲，
朗：朗，
}));
},
},
手表：{}，
方法：{
初始化（）{
console.log（“init”）；
},
openWindow（）{
console.log（this）；
this.window_open=true；
},
},
};

API端点：

[
{
"id": 1,
"nic": "9886556V",
"locationName": "Cargils",
"lat": "6.5945719",
"long": "79.9489557",
"policeArea": "south",
"dateTime": "2021-04-20T04:26:49.000000Z",
"created_at": null,
"updated_at": null
},
{
"id": 2,
"nic": "123456789V",
"locationName": "Super Centre",
"lat": "6.9175873",
"long": "79.8589105",
"policeArea": "Hyde Park Corner",
"dateTime": "2021-04-20T05:03:49.000000Z",
"created_at": null,
"updated_at": null
}
]

---

返回此.Data.map

，这是您的问题<代码>返回此.data.map

...
    axios(config).then((val) => {
      this.data = val.data; // Fix here
    });
  },

  computed: {
    google: gmapApi,

    markers() {
      return this.data.map( // Fix here
          (locationName,lat,long) => ({locationName, position: lat, long: long,})
      );
    },

---

您没有名为“data”的数据属性。确保在

数据

函数返回值中定义

数据：[]