看着手中还未整理完的旅行照片，你是否已经忘记在哪儿里拍摄的这些照片？你是否想要一张专属的旅行地图，将曾经到访过的地点在上边清晰标注出来。
jVectorMap 可以帮你实现这个愿望，最重要的是它开源且操作简单。
我们可以在 Examples 中查看 jVectorMapke 能实现的功能，其中 Markers on the world map 就是我们寻觅很久的“恋人”。看这一个个小黄点点，心里还是很激动的。
Markers on the world map
下载的时候请注意，一定下载jVectorMap 不要下载成 jqvmap, 因为 jqvmap 没有标注功能，只能呈现出漂亮的地图。
下载
我们以美国地图举个栗子1。
在要引用地图的html 文档中引入如下语句，dist 是下载程序包中的一个文件夹，引用地址要根据文件夹的实际位置做相应调整：
<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 改变背景颜色， 若需要进一步完善功能，更改样式，请查看 API 手册，尽管它是英文的，但我们已经站在了巨人的肩膀上，比自己无中生有节省了不少时间，因此推荐大家读读 API。
最后，还请大家重视版权，尊重你我他！任何用途都可以点击licenses 查看jVectorMap 版权使用说明。
参考资料：
