EndlessPower — 清水河キャンパス充電スタンドリアルタイムマップ

Web

概要

EndlessPowerは電子科技大学・清水河校区の充電桩(EV充電スタンド)を探すためのシンプルで使いやすいWebアプリです。高德地图(Amap)をベースに、公式APIが返す座標の重複や命名の混乱を解消するために、重なる点に小さなオフセットを与えて地図上で個々の充電桩を独立して表示します。ステータスは色で視覚化され、あいまい検索やサイトのお気に入り登録も可能。追加のライブラリを必要としない単一HTMLファイル構成で、GitHub Pagesでそのままホスティングできます。

GitHub

リポジトリの統計情報

  • スター数: 4
  • フォーク数: 1
  • ウォッチャー数: 4
  • コミット数: 7
  • ファイル数: 3
  • メインの言語: HTML

主な特徴

  • 高徳地図(Amap)上にキャンパスの充電桩をリアルタイム表示
  • 座標が重複するポイントに対する自動オフセット(智能防重叠)
  • ステータスを色で分離し、可視性を向上
  • あいまい検索・お気に入り機能をブラウザ単体で提供

技術的なポイント

EndlessPowerは「ゼロ依存」を掲げたシングルページのHTMLアプリケーションです。主要ファイルは QingshuiCampus.html に実装され、外部ライブラリを使わずに高德(Amap)JavaScript APIを地図表示の基盤として利用します。サーバサイドを持たない静的構成のため、データ取得は公式APIや静的JSONエンドポイントからフェッチし、クライアント側で表示と状態管理を行います。

注目すべき実装上の工夫は「重複座標の分散アルゴリズム」です。公式APIが同一位置を返すケースに対し、単純なクラスタリングではなく各ポイントに対して微小なランダム/規則的なオフセット(ジッター)を付与することで、マーカーが重ならず個別にクリック可能になります。この処理はユーザー体験を大きく改善し、名称やステータスが重なり見えなくなる問題を解決します。

UI面では、充電桩の状態を色で表現(例:使用中・空き・故障など)し、ポップアップで各插座の詳細を表示します。検索はあいまい検索(部分一致)を実装しており、スポット名や場所のキーワードから素早く候補を絞れます。お気に入り機能はブラウザの localStorage を利用し、サーバ保存不要でユーザー側に永続化されます。

パフォーマンス面では、地図描画とマーカー生成を軽量化する配慮があり、表示点数が増えてもクライアント負荷を抑える基本的な最適化(例えば、表示範囲に基づく描画やバッチ処理)を適用可能な設計になっています。今後の拡張余地としては、WebSocketによる状態プッシュ、より洗練された重複解消アルゴリズム(フォースレイアウトや分布アルゴリズム)、認証・アクセス制御、地図タイルのキャッシュなどが考えられます。

プロジェクトの構成

主要なファイルとディレクトリ:

  • LICENSE: file
  • QingshuiCampus.html: file
  • README.md: file

(QingshuiCampus.html に地図初期化、データ取得、マーカー生成、検索・お気に入りロジックが含まれる単一ファイル構成)

まとめ

シンプル設計で実用性に富むキャンパス充電スポット可視化ツール。静的配信で手軽に使える点が魅力。

リポジトリ情報:

READMEの抜粋:

EndlessPower - 校园充电桩实时查询地图

一个轻量、零依赖的Web应用,旨在解决电子科技大学(清水河校区)师生寻找可用充电桩的痛点。通过直观的地图界面,帮助您快速找到可用的充电桩,并查看每个插座的详细信息。

➡️ 点击此处查看在线演示

项目背景

在使用闪开来电等官方平台时,我们发现其提供的许多充电桩位置有误、多个充电桩在地图上重叠成一个点,且命名混乱,给寻找充电桩带来了极大的不便。为了解决这些问题,本项目应运而生。由于时间有限,目前实现了核心的基本功能,作为一个起点,希望能为大家提供便利。