當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2023/12/15 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 echarts 不支持手机浏览器_最佳实践 | 地图加载慢，还不支持现有浏览器？巧用 Mapbox 静态地图！... 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

#When and How to Use Static Maps

地圖加載慢？瀏覽器支持不友好？或許使用 Mapbox 靜態(tài)地圖是個(gè)討巧的思路！

靜態(tài)地圖 —— Static Map，什么是靜態(tài)地圖，為什么用，誰在用，還有怎么用，這篇文章將會(huì)為你一一道來。

什么是靜態(tài)地圖

Mapbox Static Maps 是可以將 Mapbox Studio 生成的地圖樣式變成圖片的 Rest APIs 和客戶端庫的集合。

了解更多請查看：

分享 | Built with Mapbox —— 30分鐘掌握 Mapbox 靜態(tài)地圖?mp.weixin.qq.com

靜態(tài)地圖是網(wǎng)站或移動(dòng)應(yīng)用程序中顯示地圖的最簡單的方式，因?yàn)樗鼈儾恍枰貓D庫或 SDK，而且可以在任何地方顯示圖像，比如在應(yīng)用程序或 UI 中無法集成交互地圖的地方。

開發(fā)人員使用靜態(tài)地圖只需幾行代碼，以及一個(gè) HTML 圖像標(biāo)記就可以創(chuàng)建地圖，如下方代碼

靜態(tài)地圖的速度很快。在不同的用例和地區(qū)，靜態(tài)地圖的平均加載時(shí)間在 100-425 毫秒之間（這取決于圖片是否已經(jīng)被緩存）。

誰在用靜態(tài)地圖，為什么用？

Strava（可以理解為海外的 Keep），Snapchat，Lyft，雅虎日本和 Shopify 都使用靜態(tài)地圖來減少加載時(shí)間，提高用戶參與度。

靜態(tài)地圖以圖像的形式渲染，實(shí)現(xiàn)了對跨瀏覽器和跨平臺(tái)的支持，包括在不支持 OpenGL（OpenGL 是一種為大多數(shù) Web 和移動(dòng)地圖渲染器所使用的渲染技術(shù)）的傳統(tǒng)瀏覽器中，以及更多的傳統(tǒng)媒體（如印刷物）中。

靜態(tài)地圖是數(shù)據(jù)記者的寵兒，你可以在 Buzzfeed 的網(wǎng)絡(luò)與平面新文章中閱讀到以地圖為特色的新聞故事。

雅虎日本利用靜態(tài)地圖的通用平臺(tái)支持，幫助用戶可以在使用任何瀏覽器的時(shí)候，獲得一致的網(wǎng)絡(luò)體驗(yàn)。他們在 Mapbox Studio 中創(chuàng)建了一種地圖樣式，支持以下不同的情況：

對于那些瀏覽器支持 Mapbox GL JS 的用戶，他們可以使用 GL JS

對于那些瀏覽器不支持的用戶，他們則可以使用靜態(tài)地圖

由于 GL JS 和靜態(tài)地圖使用相同的地圖渲染邏輯，這意味著雅虎日本的用戶可以獲得一致的地圖體驗(yàn)。查看本指南，了解如何構(gòu)建相同的體驗(yàn)。

健身和社交媒體

由于靜態(tài)地圖速度快、重量輕，因此它們非常適合于提高性能直接推動(dòng)參與度的用例。

Strava 使用靜態(tài)地圖顯示動(dòng)態(tài)的活動(dòng)信息，并通過路線地圖向用戶展示跑步、騎車和其他活動(dòng)的詳細(xì)摘要。這些地圖為用戶提供了上下文信息，鼓勵(lì)他人參與其中，并鼓勵(lì)他們自己去活動(dòng)。

Snap 在用戶的資料頁面中使用靜態(tài)地圖，為用戶提供了用戶在地圖上的好友位置的快速快照。這些地圖通過超鏈接來驅(qū)動(dòng)互動(dòng)---用戶可以點(diǎn)擊地圖圖片直接與好友留言和互動(dòng)。

在線交付和物流

靜態(tài)地圖為開發(fā)者節(jié)省了時(shí)間，同時(shí)又不犧牲功能和靈活性。

Shopify 在他們的包裹追蹤應(yīng)用 Arrive 中使用靜態(tài)地圖和交互式地圖，讓用戶始終能快速、準(zhǔn)確地了解到他們的包裹在哪里，以及他們要去哪里。他們在 feed 中使用靜態(tài)地圖向用戶展示他們的包裹目前在哪里，同時(shí)還提供了將靜態(tài)地圖擴(kuò)展為更大的交互式地圖的選項(xiàng)，以跟蹤包裹的整個(gè)旅程。

像 Lyft 和 Square 這樣的客戶使用靜態(tài)地圖來優(yōu)化在線交付體驗(yàn)，通過讓用戶準(zhǔn)確地了解到他們的購買地點(diǎn)，從而與用戶建立信任。

還有什么優(yōu)點(diǎn)？

開發(fā)人員還可以利用靜態(tài)地圖的快速加載時(shí)間來提高 GL 網(wǎng)站地圖的感知性能。可感知性能是指用戶對網(wǎng)站的感覺有多快。提高感知性能的策略可以讓開發(fā)人員在后臺(tái)加載完整的網(wǎng)頁體驗(yàn)時(shí)，保持用戶的參與度。

開發(fā)人員可以使用靜態(tài)地圖來立即向用戶展示一些相關(guān)的東西，而交互式的 GL 地圖在后臺(tái)加載時(shí)，我們有一個(gè)例子，詳細(xì)介紹了如何做到這一點(diǎn)。

Load a static placeholder map until Mapbox GL JS finishes rendering?bl.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>

一起來構(gòu)建吧！

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

英文文檔：Static images／Static tiles

如果你想獲得更多關(guān)于地圖的內(nèi)容教程，歡迎添加 Max（Mapbox_max) 加入開發(fā)者群。

歡迎您進(jìn)入 Mapbo.cn 留下你的問題、建議、產(chǎn)品想法等，我們會(huì)在 1- 3 個(gè)工作日內(nèi)回復(fù)你哦!

Mapbox?Mapbox.cn

總結(jié)

以上是生活随笔為你收集整理的echarts 不支持手机浏览器_最佳实践 | 地图加载慢，还不支持现有浏览器？巧用 Mapbox 静态地图！...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：盈通 Radeon RX 7900 XT
下一篇： CEO自愿降薪98%！Zoom全球大裁员