教你用 jVectorMap 製作屬於自己的旅行足跡
jVectorMap
JVectorMap 是一個優秀的、相容性強的 jQuery 地圖外掛。
它可以工作在包括 IE6 在內的各款瀏覽器中,向量圖輸出,除官方提供各國地圖資料外,使用者可以使用資料轉換程式定製地圖資料。例如街道地圖、小區地圖等等。
JVectorMap 官方網站提供了很多相關文件和使用示例,感興趣的小夥伴可以自己研究一下。
今天教大家通過 jVectorMap 製作旅行足跡地圖,最終的效果可以檢視下面的 Demo 演示(中國),並教大家如何將製作好的足跡地圖嵌入到我們自己的部落格中。
目錄結構
紅色框中的檔案是必須要引入的內容。
index.html 中需要新增足跡位置和相關樣式。
開始
index.html
分為三部分介紹:
如何更換不同國家地圖。
如何修改地圖顏色等相關樣式。
如何新增足跡位置。
第一部分:如何更換不同國家地圖。
<html> <head> <!--引入jQuery框架--> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <!--引入jVectorMap庫--> <script type="text/javascript" src="js/jquery-jvectormap-1.2.2.min.js"></script> <!--引入樣式表--> <link href="js/jquery-jvectormap-1.2.2.css" rel="stylesheet" media="screen"> <!--引入中國地圖資料庫--> <script type="text/javascript" src="js/jquery-jvectormap-cn-merc-en.js"></script> <!--引入美國地圖資料庫--> <!--script type="text/javascript" src="js/jquery-jvectormap-us-aea.js"></script--> <!--引入世界地圖資料庫--> <!--script type="text/javascript" src="js/jquery-jvectormap-world-mill.js"></script--> </head> <body>
提前下載需要的國家地圖,拷貝到 js 目錄下。
在 <head>
標籤裡引入地圖資料: <script type="text/javascript" src="js/地圖檔名"></script>
注意 :同時只能有一個地相簿,注意不要引入多個地圖資料。可以選擇註釋掉其他的,方便更改。
第二部分:如何修改地圖顏色等相關樣式。
<!--background-color: 地圖背景顏色--> <div id="map" style="background-color:#353535"> </div> <script> $('#map').vectorMap({ // 此處更改地圖 map: 'cn_merc_en', // 中國地圖 //map: 'us-aea', // 美國地圖 //map: 'world-mill', // 世界地圖 backgroundColor: 'transparent', zoomMin: 0.9, // 滑鼠縮放時的最小比例 zoomMax: 2.4, // 滑鼠縮放時的最大比例 focusOn: { x: 0.55, y: 2, scale: 0.9 }, regionStyle: { initial: { fill: '#e5e5e5', // 地圖顏色 "fill-opacity": 1, // 省份(州)是否隱藏,滑鼠滑動時顯示; 1:顯示,2:隱藏。 stroke: 'none', "stroke-width": 0, "stroke-opacity": 1 }, hover: { fill: '#ccc', // 滑鼠滑動至某省份的高亮顏色。 "fill-opacity": 0.8 }, selected: { fill: 'yellow' }, selectedHover: {} }, markerStyle: { initial: { fill: '#fd8888', // 足跡位置的填充顏色 stroke: '#fff' // 足跡位置的描邊顏色 }, hover: { fill: '#fd2020', // 滑鼠滑動至足跡位置後的填充顏色 stroke: '#fff', // 滑鼠滑動至足跡位置後的描邊顏色 "fill-opacity": 0.8 }, }, }); </script> </html>
參照程式碼註釋修改顏色和相關樣式。
千萬注意 :在更改地圖時 map: '地圖名稱'
,地圖名稱是地圖資料檔名的後半部分。
例如:
美國地圖檔名:jquery-jvectormap-us-aea.js
那地圖的名稱是:us-aea
但是要注意把 -
(橫槓)更改成 _
(下劃線)。 否則不會顯示地圖。
第三部分:如何新增足跡位置。
markers: [ // 足跡位置
// {latLng: [經度(保留兩位小數), 緯度(保留兩位小數)], name: '城市名稱'},
// 推薦查詢經緯度網站:http://www.gpsspg.com/maps.htm
{latLng: [39.90, 116.41], name: '北京'},
{latLng: [31.24, 121.50], name: '上海'},
{latLng: [46.06, 122.06], name: '內蒙古 - 烏蘭浩特'}
]
語法:{latLng: [經度(保留兩位小數), 緯度(保留兩位小數)], name: '城市名稱'},
。
如何嵌入式到部落格中
<iframe style="max-width: 100%"
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width="100%"
height="750px"
src="替換成你的足跡地圖連結">
</iframe>
把製作好的足跡地圖檔案放在伺服器上,把訪問連線放在 src
中。
然後將上面的程式碼複製到你的部落格頁面上即可。
可適配手機端和等比例縮放。
獲取原始碼
廣告時間
歡迎訪問我的個人部落格:
我的微信公眾號:
吳佳軼同學