彩票走势图

和JavaScript Maps一起旅行 足不出户玩转世界地图

原创|使用教程|编辑:龚雪|2014-01-03 09:30:35.000|阅读 1135 次

概述:一起使用JavaScript Maps世界地图,绘制自己的世界之旅吧。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

新年了,有出去旅行的打算吗,只是可惜,今年放假不给力,请不到足够的假期,是不是就要把旅行计划搁置呢。没有必要,今天为大家介绍一个足不出户也能玩遍世界的方法。在我们去旅行之前,需要大家做一些准备工作。

旅游必备:

  • JavaScript Maps:点击这里免费拿

    第一步:制作地图

    有了JavaScript Maps,我们就开始旅行吧,先把世界各地都标出来,然后筛选。输入下面的代码制作世界地图:

    <script src="//www.ammap.com/lib/3/ammap.js" type="text/javascript"></script>
    <script src="//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="//www.ammap.com/visited_countries/" style="color: #CDCDCD;">​Create your own visited countries map</a>​ or check out the <a href="//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 = "//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>

    效果图:

    JavaScript Maps国家选择

    第二步:选择国家

    在地图上或者选项中选择国家:

    JavaScript Maps国家选择

    JavaScript Maps世界地图

    第三步:设置参数

    设置地图参数:

    JavaScript Maps地图参数设置

    第四步:自由行动

    先去哪里好呢?美国吧,反正小编没去过。打开JavaScript Maps,在下面输入以下代码美国地图瞬间出现,虽然不能实际到达,但是用JavaScript Maps显示出来的地图效果,一定会给你身临其境的感觉,不信,你试试看。

    <div id="mapdiv" style="width: 100%; height: 370px;">
    
    var map;
    
    AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "//www.ammap.com/lib/3/images/";
    //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
    map.colorSteps = 10;
    map.balloon.color = "#000000";
    var dataProvider = {
    mapVar: AmCharts.maps.usaLow,
    
    areas: [
    {
    id: "US-AL",
    value: 4447100},
    {
    id: "US-AK",
    value: 626932},
    {
    id: "US-AZ",
    value: 5130632},
    {
    id: "US-AR",
    value: 2673400},
    {
    id: "US-CA",
    value: 33871648},
    {
    id: "US-CO",
    value: 4301261},
    {
    id: "US-CT",
    value: 3405565},
    {
    id: "US-DE",
    value: 783600},
    {
    id: "US-FL",
    value: 15982378},
    {
    id: "US-GA",
    value: 8186453},
    {
    id: "US-HI",
    value: 1211537},
    {
    id: "US-ID",
    value: 1293953},
    {
    id: "US-IL",
    value: 12419293},
    {
    id: "US-IN",
    value: 6080485},
    {
    id: "US-IA",
    value: 2926324},
    {
    id: "US-KS",
    value: 2688418},
    {
    id: "US-KY",
    value: 4041769},
    {
    id: "US-LA",
    value: 4468976},
    {
    id: "US-ME",
    value: 1274923},
    {
    id: "US-MD",
    value: 5296486},
    {
    id: "US-MA",
    value: 6349097},
    {
    id: "US-MI",
    value: 9938444},
    {
    id: "US-MN",
    value: 4919479},
    {
    id: "US-MS",
    value: 2844658},
    {
    id: "US-MO",
    value: 5595211},
    {
    id: "US-MT",
    value: 902195},
    {
    id: "US-NE",
    value: 1711263},
    {
    id: "US-NV",
    value: 1998257},
    {
    id: "US-NH",
    value: 1235786},
    {
    id: "US-NJ",
    value: 8414350},
    {
    id: "US-NM",
    value: 1819046},
    {
    id: "US-NY",
    value: 18976457},
    {
    id: "US-NC",
    value: 8049313},
    {
    id: "US-ND",
    value: 642200},
    {
    id: "US-OH",
    value: 11353140},
    {
    id: "US-OK",
    value: 3450654},
    {
    id: "US-OR",
    value: 3421399},
    {
    id: "US-PA",
    value: 12281054},
    {
    id: "US-RI",
    value: 1048319},
    {
    id: "US-SC",
    value: 4012012},
    {
    id: "US-SD",
    value: 754844},
    {
    id: "US-TN",
    value: 5689283},
    {
    id: "US-TX",
    value: 20851820},
    {
    id: "US-UT",
    value: 2233169},
    {
    id: "US-VT",
    value: 608827},
    {
    id: "US-VA",
    value: 7078515},
    {
    id: "US-WA",
    value: 5894121},
    {
    id: "US-WV",
    value: 1808344},
    {
    id: "US-WI",
    value: 5363675},
    {
    id: "US-WY",
    value: 493782}]
    };
    
    map.areasSettings = {
    autoZoom: true
    };
    map.dataProvider = dataProvider;
    
    var valueLegend = new AmCharts.ValueLegend();
    valueLegend.right = 10;
    valueLegend.minValue = "little";
    valueLegend.maxValue = "a lot!";
    map.valueLegend = valueLegend;
    
    map.write("mapdiv");
    });
    
    </div>

    效果图:

    JavaScript Maps美国地图

    更多地图效果:


标签:JavaScript

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP