src/components/AmapDisplay/index.vue
添加了地图相关的响应式状态:
const mapDisplay = ref(false);
const mapCenter = ref({ lng: 121.265276, lat: 31.375566 });
在SSE消息处理中添加了地图数据处理:
case 'final_summary':
if (data.map_display) {
mapDisplay.value = true;
if (data.center) {
mapCenter.value = data.center;
}
}
break;
在模板中添加了地图组件:
<AmapDisplay
v-if="mapDisplay"
:mapDisplay="mapDisplay"
:center="mapCenter"
/>
index.html
中添加了高德地图SDK引用src/components/AmapDisplay/README.md
当后端返回的数据包含以下字段时,地图会自动显示:
{
"map_display": true,
"center": {
"lng": 121.265276,
"lat": 31.375566
}
}
map_display
为 true
时,地图组件显示center
字段的 lng
和 lat
值设置已在 index.html
中配置高德地图API密钥:
<script src="https://webapi.amap.com/maps?v=2.0&key=c2f5532f8238a3523a9f381cb3e630c8"></script>
地图组件需要网络连接才能加载高德地图服务
mapDisplay
字段自动显示/隐藏组件包含一个测试按钮,当地图未加载时显示,可以手动触发地图初始化,方便开发和调试。
src/
├── components/
│ └── AmapDisplay/
│ ├── index.vue # 地图组件主文件
│ └── README.md # 使用说明文档
├── views/
│ └── report.vue # 已集成地图组件
└── index.html # 包含高德地图SDK