Javascript 对象值返回"；“未定义”；

我试图在Vuejs编写的Deck.gl中，当鼠标悬停在HexagonLayer上时显示json数据集的信息。但是，当鼠标悬停在每个六边形层上时，我得到的结果是：

名称：未定义
学生人数：未定义

注意：我认为问题出在mouseHover函数“object.name”和“object.num\u student”中。它们不被识别，这就是为什么它没有从data.json中显示它们的值。以下是我想要的：

名称：A大学

学生人数：3000

这是我的代码，有人知道如何解决这个问题吗

<script>
import mapboxgl from "mapbox-gl";

export default {
  name: "mapbox",
  data() {
    return {
      deck: null
    };
  },
  methods: {
    mouseHover: function({x, y, object}) {
      const tooltip = document.getElementById('tooltip');
      if (object) {
        tooltip.style.top = `${y}px`;
        tooltip.style.left = `${x}px`;
        tooltip.innerHTML = `
    <div><b>Name: ${object.name} &nbsp;</b></div>
    <div><b>Number of students: </b>${object.num_student}</div>
    `;
      } else { 
        tooltip.innerHTML = '';
      }
    }
  },
  mounted() { 
    const INITIAL_VIEW_STATE = {  
      latitude: 36.078456,
      longitude: 136.231530,
      zoom: 6,
      minZoom: 3,
      maxZoom: 17,
      pitch: 41,
      coverage: 0.6,
      upperPercentile: 100
    };

    mapboxgl.accessToken = "your-token"; 

    const map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/mapbox/dark-v9",
      center: [136.231530, 36.078456],
      zoom: 6
    });

    map.getCanvas().style.position = "static";

    const COLOR_RANGE = [
      [1, 152, 189],
      [73, 227, 206],
      [216, 254, 181],
      [254, 237, 177],
      [254, 173, 84],
      [209, 55, 78]
    ];

    this.deck = new Deck({
      canvas: "my-canvas",
      initialViewState: INITIAL_VIEW_STATE,
      controller: true,
      onViewStateChange: ({ viewState }) => {
        map.jumpTo({
          center: [viewState.longitude, viewState.latitude],
          zoom: viewState.zoom
        });
      },
      layers: [
        new HexagonLayer({
          data: university_data.map(function(value){
            return {
              position: [value.longitude, value.latitude],
              name: value.name,
              num_student: value.num_student
            }
          }),
          colorRange: COLOR_RANGE,
          elevationRange: [0, 1000],
          elevationScale: 250,
          extruded: true,
          opacity: 1,
          getRadius: d => 3000,
          pickable: true,
          autoHighlight: true,
          onHover: mouseHover
        })
      ]
    }); 
  }
};
</script>

从“mapbox gl”导入mapboxgl；
导出默认值{
名称：“地图盒”，
数据（）{
返回{
甲板：空
};
},
方法：{
mouseHover:function（{x，y，object}）{
const tooltip=document.getElementById（'tooltip'）；
如果（对象）{
tooltip.style.top=`${y}px`；
tooltip.style.left=`${x}px`；
tooltip.innerHTML=`
名称：${object.Name}
学生人数：${object.num_student}
`;
}否则{
tooltip.innerHTML=''；
}
}
},
挂载（）{
常量初始视图状态={
纬度：36.078456，
经度：136.231530，
缩放：6，
minZoom:3，
maxZoom:17，
投球：41分，
覆盖率：0.6，
百分位上限：100
};
mapboxgl.accessToken=“您的令牌”；
常量映射=新的mapboxgl.map({
容器：“地图”，
样式：“mapbox://styles/mapbox/dark-v9",
中间：[136.231530,36.078456]，
缩放：6
});
map.getCanvas（）.style.position=“static”；
常量颜色范围=[
[1, 152, 189],
[73, 227, 206],
[216, 254, 181],
[254, 237, 177],
[254, 173, 84],
[209, 55, 78]
];
this.deck=新甲板({
画布：“我的画布”，
初始视图状态：初始视图状态，
控制员：是的，
onViewStateChange:（{viewState}）=>{
跳图({
中间：[viewState.longitude，viewState.latitude]，
缩放：viewState.zoom
});
},
图层：[
新六角形层({
数据：university_data.map（函数（值）{
返回{
位置：[值.经度，值.纬度]，
name:value.name，
num_学生：value.num_学生
}
}),
颜色范围：颜色范围，
升降范围：[0，1000]，
升降比例：250，
对,，
不透明度：1，
getRadius:d=>3000，
pickable:是的，
自动突出显示：正确，
鼠标悬停
})
]
}); 
}
};

这不是Vue.js的答案，但我发布此答案是为了展示API的工作方式，您映射的数据也可以按如下方式完成：

data:data.map（函数（值）{
返回[数字（值.经度）、数字（值.纬度）、值]
}),

此外，为了在

onHover

中检索对象，您可以使用

object.points[0][2]

，它将为您提供原始数据对象。 样本：

const{
德克尔，
六角形层
}=甲板；
让数据=[{
“名称”：“A大学”，
“num_学生”：3000，
“纬度”：37.5271822，
“经度”：140.394005
},
{
“名称”：“B大学”，
“num_学生”：1000，
“纬度”：34.6882226，
“经度”：135.6060808
}
];
常量颜色范围=[
[1, 152, 189],
[73, 227, 206],
[216, 254, 181],
[254, 237, 177],
[254, 173, 84],
[209, 55, 78]
];
函数renderLayer（）{
mapboxgl.config.ACCESS_TOKEN=“pk.eyj1ijoidwjlcmrhdgeilcjhijoi2pwy3owbgfxmdvwntxdwmms2owtzbij9.1PPVl0VLUQgqrosrI2nUhg”；
常量映射=新的mapboxgl.map({
容器：“地图”，
样式：“mapbox://styles/mapbox/dark-v9",
中间：[136.231530,36.078456]，
缩放：10
});
//map.getCanvas（）.style.position=“static”；
常量初始视图状态={
纬度：34.6882226，
经度：135.6060808，
缩放：10，
};
常量六边形层=新六边形层({
id:'热图'，
颜色范围：颜色范围，
数据：data.map（函数（值）{
返回[数字（值.经度）、数字（值.纬度）、值]
}),
升降范围：[0，1000]，
升降比例：250，
对,，
getPosition:d=>d，
不透明度：1，
pickable:是的，
自动突出显示：正确，
悬停：({
对象
x,，
Y
}) => {
如果（对象）{
console.log（object.points[0][2]，x，y）；
object=object.points[0][2]；
const tooltip=document.getElementById（'tooltip'）；
tooltip.style.top=`${y}px`；
tooltip.style.left=`${x}px`；
tooltip.innerHTML=`
名称：${object.Name}
学生人数：${object.num_student}
`;
}否则{
tooltip.innerHTML=''；
}
},
半径：2000，
覆盖范围：1
});
新甲板({
初始视图状态：初始视图状态，
控制员：是的，
画布：“我的画布”，
onViewStateChange：({
视图状态
}) => {
跳图({
中间：[viewState.longitude，viewState.latitude]，
缩放：viewState.zoom
});
},
层：[六角形层]
});
}
renderLayer（）
#工具提示：空{
显示：无；
}
#工具提示{
字体系列：Helvetica、Arial、无衬线字体；
位置：绝对位置；
填充：4px；
利润率：8px；
背景：rgba（0,0,0,0.8）；
颜色：#fff；
最大宽度：300px；
字体大小：14px；
z指数：9；
指针事件：无；
高度：50px！重要；
宽度：200px！重要；
}
#地图盒{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
}
#地图框>*{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

您可以在
鼠标悬停（）
函数中尝试
console.log（object）
并查看
object
的实际值吗