高德大赛「城市舒适度感知网页」开发全指南（零基础适用）

npm create vue@3  # 创建Vue3项目（所有选项按回车默认即可）
cd vue-project    # 进入项目文件夹
npm install       # 安装依赖
npm run dev       # 启动项目

<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德Key"></script>

<template>
  <div id="map" style="width:100%; height:100vh;"></div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 初始化地图（默认显示苏州区域）
  const map = new AMap.Map('map', {
    zoom: 14,          // 缩放级别
    center: [120.6196, 31.2994], // 苏州中心坐标
    viewMode: '3D'     // 3D模式
  })
})
</script>

<template>
  <MapView />
</template>

<script setup>
import MapView from './MapView.vue'
</script>

<template>
  <div id="map" style="width:100%; height:100vh;"></div>
</template>

<script setup>
import { onMounted } from 'vue'

// 生成模拟热力点数据
function generateHeatData(center, num = 80) {
  const data = []
  for (let i = 0; i < num; i++) {
    const lng = center[0] + (Math.random() - 0.5) * 0.03
    const lat = center[1] + (Math.random() - 0.5) * 0.03
    const count = Math.floor(Math.random() * 100) + 20
    data.push({ lng, lat, count })
  }
  return data
}

// 计算舒适度分数（人流越少分数越高）
function calculateComfort(heat) {
  let score = 100 - heat * 60
  return Math.max(30, Math.min(100, Math.round(score)))
}

onMounted(() => {
  const center = [120.6196, 31.2994] // 苏州中心坐标
  // 初始化地图
  const map = new AMap.Map('map', {
    zoom: 14,
    center: center,
    viewMode: '3D'
  })

  // 添加热力图
  const heatmap = new AMap.Heatmap(map, {
    radius: 25,
    opacity: [0, 0.8],
    gradient: { 0.5: 'blue', 0.8: 'yellow', 1: 'red' }
  })
  heatmap.setDataSet({ data: generateHeatData(center), max: 100 })

  // 模拟公园数据
  const parks = [
    { name: '金鸡湖景区', lng: 120.7231, lat: 31.3125 },
    { name: '白塘生态园', lng: 120.6723, lat: 31.3567 },
    { name: '上方山森林公园', lng: 120.5678, lat: 31.2789 },
    { name: '独墅湖公园', lng: 120.7456, lat: 31.2890 }
  ]

  // 添加公园标记和点击弹窗
  parks.forEach(park => {
    const marker = new AMap.Marker({
      position: [park.lng, park.lat],
      title: park.name
    })
    marker.setMap(map)

    const heat = Math.random() // 随机人流热度（0-1）
    const comfortScore = calculateComfort(heat)

    // 点击标记显示舒适度信息
    marker.on('click', () => {
      const color = comfortScore > 70 ? 'green' : comfortScore > 40 ? 'orange' : 'red'
      const advice = comfortScore > 70 ? '适合停留' : comfortScore > 40 ? '一般' : '建议避开'

      const infoWindow = new AMap.InfoWindow({
        content: `
          <div style="padding:12px; font-size:14px;">
            <h3 style="margin:0; font-size:16px;">${park.name}</h3>
            <p style="margin:8px 0;">舒适度：<strong style="color:${color}">${comfortScore}分</strong></p>
            <p style="margin:0; font-size:12px;">建议：${advice}</p>
          </div>
        `,
        offset: new AMap.Pixel(0, -30)
      })
      infoWindow.open(map, [park.lng, park.lat])
    })
  })
})
</script>

# 城市舒适度感知系统
## 1. 项目背景
为市民提供公共空间舒适度参考，辅助出行决策。
## 2. 技术实现
- 高德JS API：地图、热力图、标记点、信息窗口
- Vue3：前端框架
- 自定义算法：基于人流热度计算舒适度
## 3. 功能说明
- 3D地图展示城市区域
- 热力图直观呈现人流分布
- 点击公园标记查看舒适度评分及建议
## 4. 高德API使用清单
- AMap.Map：初始化地图
- AMap.Heatmap：展示热力图
- AMap.Marker：标记公园位置
- AMap.InfoWindow：显示舒适度信息
## 5. 创新点
将地理信息与环境舒适度结合，提升出行体验。