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

最新推荐文章于 2021-06-03 23:42:07 发布

weixin_34275734

最新推荐文章于 2021-06-03 23:42:07 发布

阅读量486

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/1163318/blog/191047

版权

2019独角兽企业重金招聘Python工程师标准>>>

个人感觉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>

转载于:https://my.oschina.net/u/1163318/blog/191047