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

Question

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

  <!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>

Answer 1

AmCharts.ready 等同于 window.onload，因此在这种情况下它是无用的，因为您的代码只会运行一次。摆脱那个 ready 调用并让你的 forEach 代码运行自己将使其工作。您也不想在添加每个图像后调用 validateData，因为它会减慢进程 - 只需在完成 forEach 后调用一次即可。

我不太确定为什么您在 makeChart 之后有 forEach 代码运行ning，而您只需预先创建图像并将其分配给 makeChart 调用本身中的图像数组。如果只在地图初始化时必须有图像设置代码运行，将其放在地图的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();
        }
      }
    ]
  });

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

How to display markers on amCharts world map using angular routing?

javascript

angularjs

amcharts

world-map