echarts 不支持手机浏览器_最佳实践 | 地图加载慢，还不支持现有浏览器？巧用 Mapbox 静态地图！...

#When and How to Use Static Maps

地图加载慢？浏览器支持不友好？或许使用 Mapbox 静态地图是个讨巧的思路！

静态地图 —— Static Map，什么是静态地图，为什么用，谁在用，还有怎么用，这篇文章将会为你一一道来。

什么是静态地图

Mapbox Static Maps 是可以将 Mapbox Studio 生成的地图样式变成图片的 Rest APIs 和客户端库的集合。

了解更多请查看：

分享 | Built with Mapbox —— 30分钟掌握 Mapbox 静态地图mp.weixin.qq.com

静态地图是网站或移动应用程序中显示地图的最简单的方式，因为它们不需要地图库或 SDK，而且可以在任何地方显示图像，比如在应用程序或 UI 中无法集成交互地图的地方。

开发人员使用静态地图只需几行代码，以及一个 HTML 图像标记就可以创建地图，如下方代码

<img alt='static Mapbox map of the San Francisco bay area'
src='https://api.mapbox.com/styles/v1/mapbox/streets-
v11/static/-122.337798,37.810550,9.67,0.00,0.00/1000x600@2x?
access_token=pk.eyJ1IjoiaXJpc2ppYXFpc2hpIiwiYSI6ImNqbTk1cm8zdDA1djMza21vMGVkbDRjcnQifQ.rl3QYFhlM3ra9Rb6lcJFDA'
>

静态地图的速度很快。在不同的用例和地区，静态地图的平均加载时间在 100-425 毫秒之间（这取决于图片是否已经被缓存）。

谁在用静态地图，为什么用？

Strava（可以理解为海外的 Keep），Snapchat，Lyft，雅虎日本和 Shopify 都使用静态地图来减少加载时间，提高用户参与度。

静态地图以图像的形式渲染，实现了对跨浏览器和跨平台的支持，包括在不支持 OpenGL（OpenGL 是一种为大多数 Web 和移动地图渲染器所使用的渲染技术）的传统浏览器中，以及更多的传统媒体（如印刷物）中。

静态地图是数据记者的宠儿，你可以在 Buzzfeed 的网络与平面新文章中阅读到以地图为特色的新闻故事。

雅虎日本利用静态地图的通用平台支持，帮助用户可以在使用任何浏览器的时候，获得一致的网络体验。他们在 Mapbox Studio 中创建了一种地图样式，支持以下不同的情况：

对于那些浏览器支持 Mapbox GL JS 的用户，他们可以使用 GL JS

对于那些浏览器不支持的用户，他们则可以使用静态地图

由于 GL JS 和静态地图使用相同的地图渲染逻辑，这意味着雅虎日本的用户可以获得一致的地图体验。查看本指南，了解如何构建相同的体验。

健身和社交媒体

由于静态地图速度快、重量轻，因此它们非常适合于提高性能直接推动参与度的用例。

Strava 使用静态地图显示动态的活动信息，并通过路线地图向用户展示跑步、骑车和其他活动的详细摘要。这些地图为用户提供了上下文信息，鼓励他人参与其中，并鼓励他们自己去活动。

Snap 在用户的资料页面中使用静态地图，为用户提供了用户在地图上的好友位置的快速快照。这些地图通过超链接来驱动互动---用户可以点击地图图片直接与好友留言和互动。

在线交付和物流

静态地图为开发者节省了时间，同时又不牺牲功能和灵活性。

Shopify 在他们的包裹追踪应用 Arrive 中使用静态地图和交互式地图，让用户始终能快速、准确地了解到他们的包裹在哪里，以及他们要去哪里。他们在 feed 中使用静态地图向用户展示他们的包裹目前在哪里，同时还提供了将静态地图扩展为更大的交互式地图的选项，以跟踪包裹的整个旅程。

像 Lyft 和 Square 这样的客户使用静态地图来优化在线交付体验，通过让用户准确地了解到他们的购买地点，从而与用户建立信任。

还有什么优点？

开发人员还可以利用静态地图的快速加载时间来提高 GL 网站地图的感知性能。可感知性能是指用户对网站的感觉有多快。提高感知性能的策略可以让开发人员在后台加载完整的网页体验时，保持用户的参与度。

开发人员可以使用静态地图来立即向用户展示一些相关的东西，而交互式的 GL 地图在后台加载时，我们有一个例子，详细介绍了如何做到这一点。

Load a static placeholder map until Mapbox GL JS finishes renderingbl.ocks.org

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" />
<style>body { margin: 5px 20px 20px 20px; padding: 2em; }#content {width: 800px;}#bigMap { width: 600px;height: 400px;margin: 20px 0px;display: grid;}#map {grid-column: 1;grid-row: 1;width: 100%;height: 100%;visibility: hidden;}#static {background-image: url('https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/-85.757,38.25,10/600x400?access_token=pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og');width: 100%;height: 100%;grid-column: 1;grid-row: 1;}
</style>
</head>
<body>
<header><h2>My dope site</h2>
</header>
<div id="content"><div id="bigMap"><div id="map"></div><div id="static"></div></div><div>Yeah, I'm gonna take my horse to the old town road. I'm gonna ride 'til I can't no more. I'm gonna take my horse to the old town road. I'm gonna ride 'til I can't no more (Kio, Kio). I got the horses in the back. Horse tack is attached. Hat is matte black. Got the boots that's black to match. Ridin' on a horse, ha. You can whip your Porsche. I been in the valley. You ain't been up off that porch, now. Can't nobody tell me nothin'. You can't tell me nothin'. Can't nobody tell me nothin'. You can't tell me nothin'. Ridin' on a tractor. Lean all in my bladder. Cheated on my baby. You can go and ask her. My life is a movie. Bull ridin' and boobies. Cowboy hat from Gucci. Wrangler on my booty. Can't nobody tell me nothin'. You can't tell me nothin'. Can't nobody tell me nothin'. You can't tell me nothin'. Yeah, I'm gonna take my horse to the old town road. I'm gonna ride 'til I can't no more. I'm gonna take my horse to the old town road. I'm gonna ride 'til I can't no more. I got the</div>
</div>
<script>mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og';var map = new mapboxgl.Map({container: 'map', // container idstyle: 'mapbox://styles/mapbox/streets-v11', // stylesheet locationcenter: [-85.757, 38.25], // starting position [lng, lat]zoom: 10 // starting zoom});map.on('load', function(e) {var mapContainerEl = document.getElementById('map');mapContainerEl.style.visibility = 'visible';});
</script></body>
</html>

一起来构建吧！

立即开始用 Static Images API 或 Static Tiles API ！

英文文档：Static images／Static tiles

如果你想获得更多关于地图的内容教程，欢迎添加 Max（Mapbox_max) 加入开发者群。

欢迎您进入 Mapbo.cn 留下你的问题、建议、产品想法等，我们会在 1- 3 个工作日内回复你哦!

MapboxMapbox.cn