个人中心
gpt4 book ai didi

javascript - 如何使用 Angular 路由在 amCharts 世界地图上显示标记？

转载 作者：行者123 更新时间：2023-12-03 04:10:27 25 4
gpt4 key购买 nike

我正在尝试在我的网站中包含世界地图。我的问题是，当第一次加载页面时，一切正常，但是当我在页面上的 View 之间切换时，世界地图加载时没有标记，看起来 map 无法在 Angular 路由中完全加载。我应该怎么做才能重新加载它？提前致谢。

  <!DOCTYPE html>
  <html lang="en-US">
  <head>
 <title>Online Trading Data</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" 
  href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-
  awesome/4.0.0/css/font-awesome.css" />

    <style>[ng:\:cloak],[ng-cloak],.ng-cloak { display:none;}</style>
    <style>
     html,
     body {
     width: 100%;
     height: 100%;
     margin: 0px;
    }

   #chartdiv {
    width: 100%;
    height: 50%;
   }

  #selector {
   position: absolute;
   top: 20px;
   right: 20px;
   background: rgba(255, 255, 255, 0.7);
   padding: 10px;
   font-size: 16px;
 }

 #selector input,
 #selector select {
   padding: 5px;
 }


 .ammapDescriptionTitle {
   font-size: 15px;
  font-weight: bold;
  color:#000;
}
.ammapDescriptionText {
  max-height: 200px;
  overflow: auto;
  border:1px solid;
  background-color:#dedede;
  color:#000;
}
.ammapDescriptionText img, .ammapDescriptionText p {
  max-width: 95%;
}

    </style>
    </head>

    <body>

    <div ng-app="scotchApp">
    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                    </ul>
    <div ng-view></div>


    </div>

    <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> -->
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script src="https://www.amcharts.com/lib/3/ammap.js"></script>
    <script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
    <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
    <script>
     var scotchApp = angular.module('scotchApp', ['ngRoute']);

        // configure our routes
        scotchApp.config(function($routeProvider) {
            $routeProvider

                // route for the home page
                .when('/', {
                    template : '<div id="chartdiv" style="height:500px !important; width:980px!important;">sdsd</div>',
                    controller  : 'mainController'
                })


                .when('/about', {
                    template : '<div>Second page</div>',
                    controller  : 'aboutController'
                })


                .when('/contact', {
                    template : '<div>Third page</div>',
                    controller  : 'contactController'
                });
        });

        scotchApp.controller('mainController', function($scope) {
        var relevantcities = [
        {
          "title": "Berlin",
          "latitude": 52.5235,
          "longitude": 13.4115
        },{
          "title": "Monaco",
          "latitude": 43.7325,
          "longitude": 7.4189
        },{
          "title": "Moscow",
          "latitude": 55.7558,
          "longitude": 37.6176
        },{
          "title": "Madrid",
          "latitude": 40.4167,
          "longitude": -3.7033
        },{
          "title": "London",
          "latitude": 51.5002,
          "longitude": -0.1262
        },{
          "title": "New Delhi",
          "latitude": 28.6353,
          "longitude": 77.2250
        },{
          "title": "Jerusalem",
          "latitude": 31.7857,
          "longitude": 35.2007
        },{
          "title": "Tokyo",
          "latitude": 35.6785,
          "longitude": 139.6823
        },{
          "title": "Bangkok",
          "latitude": 13.7573,
          "longitude": 100.5020
        }, {
          "title": "Abu Dhabi",
          "latitude": 24.4764,
          "longitude": 54.3705
        },{
          "title": "Washington",
          "latitude": 38.8921,
          "longitude": -77.0241,
          "color":"#000"
        }

        ];
            var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";

            var map = AmCharts.makeChart( "chartdiv", {
              "type": "map",
              "theme": "light",

              "imagesSettings": {
                "rollOverColor": "#000",
                "rollOverScale": 1,
                "selectedScale": 1,
                "selectedColor": "red",
                "color": "#13564e"
              },

              "areasSettings": {
                "unlistedAreasColor": "#000"
              },

              "dataProvider": {
                "map": "worldLow",
                "images": []
              }
            } );

            // populate the city dropdown when the page loads
            AmCharts.ready( function() {
            relevantcities.forEach( function (arrayItem)
            {
                    var city = arrayItem;
                    city.svgPath = targetSVG;
                    city.zoomLevel = 3;
                    city.scale = 1.2;
                    city.label = city.title + " +25%";
                    city.color = "green";
                    //city.description ="<img src='http://upload.wikimedia.org/wikipedia/commons/9/97/Palace_of_Westminster%2C_London_-_Feb_2007.jpg' /><p>London is the capital and most populous city of England and the United Kingdom. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. London's ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2) medieval boundaries and in 2011 had a resident population of 7,375, making it the smallest city in England. Since at least the 19th century, the term London has also referred to the metropolis developed around this core The bulk of this conurbation forms the Greater London administrative area (coterminous with the London region), governed by the Mayor of London and the London Assembly.</p>";

                  // add city object to map
                  map.dataProvider.images.push( city );
                  map.validateData();
            });

            } );


        });

        scotchApp.controller('aboutController', function($scope) {
            $scope.message = 'Look! I am an about page.';
        });

        scotchApp.controller('contactController', function($scope) {
            $scope.message = 'Contact us! JK. This is just a demo.';
        });

    </script>
    </body>
    </html>

最佳答案

AmCharts.ready 相当于 window.onload，因此在这种情况下它没有用，因为您的代码只会运行一次。摆脱 ready 调用并让 forEach 代码独立运行将使其正常工作。您也不希望在添加每个图像后调用 validateData，因为这会减慢进程 - 只需在 forEach 完成后调用一次即可。

我不太确定为什么你的 forEach 代码在 makeChart 之后运行，而你可以预先创建图像并将其分配给 makeChart 调用本身中的图像数组。如果您必须仅在初始化 map 时运行图像设置代码，请将其放入 map 的 init 中。事件:

  var map = AmCharts.makeChart("chartdiv", {
    // ..
    listeners: [
      {
        event: "init",
        method: function(e) {
          var map = e.chart;
          // populate the city dropdown when the page loads
          relevantcities.forEach(function(arrayItem) {
            var city = arrayItem;
            city.svgPath = targetSVG;
            city.zoomLevel = 3;
            city.scale = 1.2;
            city.label = city.title + " +25%";
            city.color = "green";

            // add city object to map
            map.dataProvider.images.push(city);
          });
          map.validateData();
        }
      }
    ]
  });

关于javascript - 如何使用 Angular 路由在 amCharts 世界地图上显示标记？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44353588/

25 4 0
文章推荐： javascript - 使用 python 抓取从网页中嵌入的传单应用程序获取坐标
文章推荐： javascript - 根据旋转 Angular 计算新的圆偏移？
文章推荐： javascript - 当 Knockout JS 中可观察的属性发生变化时执行函数
文章推荐： javascript - 如何通过map函数将函数属性传递给子/孙子？ (并从状态中删除项目)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com