7款個性化jQuery/HTML5地圖外掛

2015-11-15    分類:WEB開發、程式設計開發、首頁精華3人評論發表於2015-11-15

本文由碼農網 – 小峰原創,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃

現在我們經常會用到一些地圖應用,無論是在網頁上還是手機App中,地圖貌似是一個不可或缺的應用。本文將帶領大家一起來看看一些基於jQuery和HTML5的個性化地圖外掛,有幾款地圖比較實用,有些則是具有抽象的概念,很有個性化。

1、HTML5世界地圖 劃分世界區域並顯示國家名

這是一款基於HTML5的世界地圖應用,它的特點是可以將地圖中的各個國家區域進行劃分,滑鼠滑過時即可顯示該區域對應的國家名稱,你也可以對彈出的標籤進行自定義文字和自定義樣式。

html5-global-map

線上演示        原始碼下載

2、jQuery向量SVG地圖外掛JVectorMap

JVectorMap是一款基於jQuery的向量地圖外掛,它是基於SVG結構的,和其他jQuery地圖外掛不同的是,jVectorMap是向量地圖,但是它同樣支援地圖縮放和地圖平面移動等相應的功能。由於JVectorMap是基於jQuery的,所以支援大部分主流的瀏覽器,應用也相當廣泛。

jquery-jvectormap

線上演示        原始碼下載

3、jQuery中國地圖外掛

今天要來介紹一款相對更實用些的jQuery中國地圖外掛,在該例項中,整張中國地圖都按各個省份切割,滑鼠滑過相應的省份時,即可彈出對應省份的具體介紹。

jquery-china-map

線上演示        原始碼下載

4、純CSS3實現地圖熱點文字標註提示

這款地圖應用的特點是地圖上有許多標註點,點選標註點即可在頁面上彈出一個文字提示框,用來說明該標註點在地圖上的詳細資訊。如果你需要有一款帶標註功能的地圖應用,那麼這款CSS3地圖外掛可以滿足你。

pure-css3-map-tips

線上演示        原始碼下載

5、HTML5 SVG世界地圖 地圖可拖拽和縮放

今天要分享的這款HTML5地圖應用是一張世界地圖,地圖元素是使用SVG繪製的,並且地圖可以拖拽和區域性縮放,效果非常不錯。

html5-svg-world-map

線上演示        原始碼下載

6、HTML5/CSS3帶區域地圖的聯絡表單

今天我們要來分享一款功能更加強大的HTML5/CSS3聯絡表單,它可以選中不同區域顯示相應的地圖,然後針對該區域填寫聯絡表單。

html5-css3-contact-form-map

線上演示        原始碼下載

7、HTML5 3D實景地圖動畫 3D效果很酷

今天我們來分享一款全新的HTML5 3D效果,是一款3D實景地圖,這款3D地圖擷取了實景的房屋大廈,並且可以旋轉展示,非常酷。

html5-3d-real-map

線上演示        原始碼下載

以上就是一些精美的jQuery/HTML5地圖外掛,如果你也有好的地圖外掛,歡迎跟我們分享。

本文連結:http://www.codeceo.com/article/7-html5-jquery-map-plugins.html
本文作者:碼農網 – 小峰
原創作品,轉載必須在正文中標註並保留原文連結和作者等資訊。]

相關文章