JavaScript Maps制作世界地图代码分享

2014/01/07 14:25
阅读数 884

个人感觉JavaScript Maps比较好用,制作地图简单,效果也不错,下面是世界地图的制作方法。

效果图:

 

代码:

<script src="http://www.ammap.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="http://www.ammap.com/lib/3/maps/js/worldHigh.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 1550px; height: 450px;"></div>
<div style="font-size: 70%; padding: 5px; text-align: center; background-color: #666666; margin-top: 1px; color: #CDCDCD;"><a href="http://www.ammap.com/visited_countries/" style="color: #CDCDCD;">Create your own visited countries map</a> or check out the <a href="http://www.amcharts.com/" style="color: #CDCDCD;">JavaScript Charts</a>.</div>
<script type="text/javascript">
var map;
AmCharts.ready(function() {
map = new AmCharts.AmMap();
map.pathToImages = "http://www.ammap.com/lib/images/";
map.panEventsEnabled = true;
map.backgroundColor = "#666666";
map.backgroundAlpha = 1;
 
map.zoomControl.panControlEnabled = true;
map.zoomControl.zoomControlEnabled = true;
 
var dataProvider = {
mapVar: AmCharts.maps.worldHigh,
getAreasFromMap: true,
areas: [
{ id: 'CZ', showAsSelected: true },
{ id: 'CN', showAsSelected: true }
]
};
 
map.dataProvider = dataProvider;
 
map.areasSettings = {
autoZoom: true,
color: "#CDCDCD",
colorSolid: "#5EB7DE",
selectedColor: "#5EB7DE",
outlineColor: "#666666",
rollOverColor: "#88CAE7",
rollOverOutlineColor: "#FFFFFF"
};
 
map.write("mapdiv");
});
</script>
展开阅读全文
打赏
0
6 收藏
分享
加载中
更多评论
打赏
0 评论
6 收藏
0
分享
返回顶部
顶部