网页地图服务建设
我们参与开发了一家炼油企业的网页地图服务,向顾客指引全国加油站位置与周边设施。当时的网页地图大多靠拖动静态图片来移动,这项服务则选择在浏览器内直接拖动、缩放地图。那时网速很慢,地图打开迟缓或图块看起来错位,位置指引本身就失去意义。我们负责把地图图块与原始地图数据对齐到屏幕坐标、减少数据传输量,以及平移与缩放的过渡效果。
不再拖动图片,而是在浏览器内移动的地图
这项网页地图服务让顾客在浏览器中查找全国加油站位置与周边设施。当时的网页地图大多靠横向拖动图片来移动。这项服务选择在浏览器内直接响应拖动与缩放操作。我们参与了开发,把地图库与原始地图数据结合起来实现这张地图。

让地图图块与原始数据不再错位的对位
网页地图把切分好的小地图图片(图块)拼接显示,再把原始地图数据中的位置叠加上去。两者坐标稍有偏差,加油站标记就会落在错误的位置。我们负责把图块与原始地图数据对齐到屏幕坐标,并找出服务界面上看起来错位的地方,修正地图图片。

为慢速网络也能打开地图而减少的传输量
网页地图每次都要接收填满屏幕的地图数据,而当时的网络光是接收这些数据就要花不少时间。我们减少地图数据的传输量并改进显示方式,让地图在慢速线路上也能打开。与服务器交换的数据也从用标签包裹的笨重格式改为更简短的写法,降低了通信量。

拖动与缩放时不丢失位置的画面过渡
拖动或缩放地图时画面若生硬跳变,用户就会搞不清自己正在看哪里。我们在平移与缩放之间加入流畅的过渡效果,让比例尺变化时也能跟上位置。这项服务中打造的地图技术,后来被移植到加油站位置指引服务、新城公交信息地图以及海外服务。

项目亮点
在浏览器内拖动与缩放的网页地图
把地图图块与原始地图数据对齐到屏幕坐标
减少数据传输量,让慢速网络也能打开地图
洞察
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



