基于OpenWeatherAPI的天气组件添加当前地理位置功能求助

不需要从零重写，基于现有代码调整即可实现功能，关键改动如下：

1. 添加地理位置获取逻辑 #

利用浏览器的navigator.geolocationAPI获取当前经纬度，在组件初始化时触发，拿到坐标后请求对应天气数据。

2. 合并地理位置与城市列表数据 #

将地理位置对应的天气数据和原有城市列表数据合并处理，统一渲染。

修改后的完整代码 #

#mode of widget (light)
mode = "dark"

#api Key from OpenWeatherMap API
apiKey = "API key"

#list of city IDs from API database
cityList = "5814616,1835847"
units = "metric"

# 存储地理位置天气数据
locationWeather = null

refreshFrequency: '15m'

# 初始化时获取地理位置
init: ->
  if navigator.geolocation
    navigator.geolocation.getCurrentPosition (position) =>
      lat = position.coords.latitude
      lon = position.coords.longitude
      # 请求当前位置天气
      $.getJSON "https://api.openweathermap.org/data/2.5/weather?lat=#{lat}&lon=#{lon}&units=#{units}&appid=#{apiKey}", (data) =>
        locationWeather = data
        # 手动触发更新，展示地理位置数据
        @updateCityListData()
    , (error) =>
      console.log("获取地理位置失败: ", error.message)

# 请求城市列表天气数据并合并渲染
updateCityListData: ->
  $.getJSON "http://api.openweathermap.org/data/2.5/group?id=#{cityList}&units=#{units}&appid=#{apiKey}", (cityData) =>
    allWeatherData = []
    # 先添加地理位置数据（如果存在）
    if locationWeather
      allWeatherData.push(locationWeather)
    # 添加城市列表数据
    allWeatherData = allWeatherData.concat(cityData.list)
    # 调用渲染逻辑
    @renderWeather(allWeatherData)

# 重写update方法，改为定时更新城市列表数据
update: ->
  @updateCityListData()

render: -> """
  <div id='weather' class='#{mode}'></div>
"""

# 统一渲染所有天气数据
renderWeather: (weatherList) ->
  inner = ""
  inner += "<div class='weatherBox'>" 
  
  for weather in weatherList
    city = weather.name
    condition = weather.weather[0].main
    temperature = Math.round(weather.main.temp)
    rainChance = weather.clouds.all
    windSpeed = Math.round(weather.wind.speed * 10) / 10
    icon = weather.weather[0].icon

    inner += "<div class='city'><div class='leftBox'><img src='clock-weather.widget/icons/weather/#{icon}.svg' alt='#{icon}'></img></div><div class='middleBox'><div class='cityName'>"
    inner += city
    inner += "</div><div class='condition'>"
    inner += condition
    inner += "</div><div class='rainChance'>Chance of Rain "
    inner += rainChance
    inner += " %</div></div><div class='rightBox'><div class='temperature'>"
    inner += temperature
    inner += "°</div><div class='wind'>"
    inner += windSpeed
    inner += " km/h</div></div></div>"

    console.log(city + condition + temperature)
  
  inner += "</div>"

  $('#weather').html(inner)


style: """
    color: white
    font-family: Helvetica Light
    font-weight: 400
    width: 100%
    position: absolute
    top: calc(27%)
    font-size: 14px
    
    #weather
        border-radius: 10px
        background-color: rgba(0,0,0,0.45)
        width: 300px
        height: 70px
        position: absolute
        top: 0
        left: 50%
        transform: translate(-50%,0)
        letter-spacing: 0px

    #weather.dark
        background-color: rgba(0,0,0,0.0)

    #weather.light
        background-color: rgba(0,0,0,0.0)
        color: black

    #weather.light header
        color: rgba(50,50,50,0.8)

    #weather.dark header
        color: rgba(255,255,255,0.10)

    header 
        padding: 10px 0 10px 0
        display: flex
        flex-direction: row
        position: fixed
        top: 0

    .weatherBox
        overflow-y: scroll
        height: 100%

    .city
        padding: 5px
        display: flex
        flex-direction: row
        //border-top: 1px solid rgba(255,255,255,0.10)

    .city .leftBox
        width: auto
        padding: 0 15px 0 0
        margin-top: 0 5px 0 0

    .leftBox img
        width: 40px
        height: 40px

    .city .middleBox
        flex-grow: 1
    
    .middleBox .cityName
        font-size: 20px
        line-height: 5px
        font-weight: 500

    .middleBox .condition
        font-size: 13px
        line-height: 20px
        margin-top: 10px

    .middleBox .rainChance
        font-size: 13px
        line-height: 15px

    .city .rightBox
        width: 30%
        text-align: right

    .rightBox .temperature
        font-size: 40px
        line-height: 20px
        font-weight: 300

    .rightBox .wind
        font-size: 13px
        line-height: 45px
        font-weight: 300
        text-align: center
"""

关键改动说明 #

• 移除原command配置，改用$.getJSON发起请求，避免curl无法访问浏览器地理位置的问题
• 添加init方法，在组件初始化时获取当前地理位置并请求对应天气数据
• 新增updateCityListData方法，请求城市列表数据并与地理位置数据合并
• 重构renderWeather方法，统一处理所有天气数据的渲染
• 修复了原style中的语法错误（如left 50%改为left: 50%，颜色值修正为合法范围）

内容的提问来源于stack exchange，提问作者Zac.R