看著手中還未整理完的旅行照片区转，你是否已經(jīng)忘記在哪兒里拍攝的這些照片匹摇？你是否想要一張專屬的旅行地圖婆跑，將曾經(jīng)到訪過(guò)的地點(diǎn)在上邊清晰標(biāo)注出來(lái)吧享。
jVectorMap 可以幫你實(shí)現(xiàn)這個(gè)愿望魏割，最重要的是它開源且操作簡(jiǎn)單。
我們可以在 Examples 中查看 jVectorMapke 能實(shí)現(xiàn)的功能钢颂，其中 Markers on the world map 就是我們尋覓很久的“戀人”钞它。看這一個(gè)個(gè)小黃點(diǎn)點(diǎn)，心里還是很激動(dòng)的遭垛。
Markers on the world map
下載的時(shí)候請(qǐng)注意尼桶，一定下載jVectorMap 不要下載成 jqvmap, 因?yàn)?jqvmap 沒有標(biāo)注功能，只能呈現(xiàn)出漂亮的地圖锯仪。
下載
我們以美國(guó)地圖舉個(gè)栗子1泵督。
在要引用地圖的html 文檔中引入如下語(yǔ)句，dist 是下載程序包中的一個(gè)文件夾庶喜，引用地址要根據(jù)文件夾的實(shí)際位置做相應(yīng)調(diào)整：
<link href="dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery-jvectormap-1.1.1.min.js"></script>
<script src="http://demo.omnigon.com/christian_bovine/showtime/js/jquery.jvectormap-us.js"></script>
<div id="map"></div>
CSS部分：
.jvectormap-label {
position: absolute;
display: none;
border: solid 1px #CDCDCD;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
color: white;
font-family: sans-serif, Verdana;
font-size: smaller;
padding: 3px;
}
.jvectormap-zoomin,
.jvectormap-zoomout {
position: absolute;
left: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #292929;
padding: 3px;
color: white;
width: 10px;
height: 10px;
cursor: pointer;
line-height: 10px;
text-align: center;
}
.jvectormap-zoomin {
top: 10px;
}
.jvectormap-zoomout {
top: 30px;
}
#map {
width: 100%;
height: 500px;
}
js 部分：
<script type="text/javascript">
$(function() {
$('#map').vectorMap({
map: 'us_aea_en',
zoomOnScroll: false,
hoverOpacity: 0.7,
backgroundColor: "#F5F5F5",
bordercolor: '#000000',
zoomButtons : false,
regionStyle: {
initial: {
stroke: 'black',
fill: 'white',
"stroke-width": 0.5
}
},
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
markers: [{
latLng: [41.50, -87.37],
name: 'Chicago'
}, {
latLng: [32.46, -96.46],
name: 'Dallas'
}, {
latLng: [36.10, -115.12],
name: 'Las Vegas'
}, {
latLng: [34.3, -118.15],
name: 'Los Angeles'
}, {
latLng: [40.43, -74.00],
name: 'New York City'
}]
});
});
</script>
整體效果：
整體效果
使用 backgroundColor 改變背景顏色小腊， 若需要進(jìn)一步完善功能，更改樣式久窟，請(qǐng)查看 API 手冊(cè)秩冈，盡管它是英文的，但我們已經(jīng)站在了巨人的肩膀上斥扛，比自己無(wú)中生有節(jié)省了不少時(shí)間入问，因此推薦大家讀讀 API。
最后稀颁，還請(qǐng)大家重視版權(quán)芬失，尊重你我他！任何用途都可以點(diǎn)擊licenses 查看jVectorMap 版權(quán)使用說(shuō)明峻村。
參考資料：
