Javascript 如何使用角度布线在amCharts世界地图上显示标记？
我正试图在我的网站上包括一张世界地图。我的问题是，当第一次加载页面时，一切正常，但当我在页面上的视图之间切换时，世界地图加载时没有标记，看起来地图无法在角度路由中完全加载。 我应该怎么做才能重新加载它？ 提前谢谢Javascript 如何使用角度布线在amCharts世界地图上显示标记？,javascript,angularjs,amcharts,world-map,Javascript,Angularjs,Amcharts,World Map,我正试图在我的网站上包括一张世界地图。我的问题是，当第一次加载页面时，一切正常，但当我在页面上的视图之间切换时，世界地图加载时没有标记，看起来地图无法在角度路由中完全加载。 我应该怎么做才能重新加载它？ 提前谢谢 <!DOCTYPE html> <html lang="en-US"> <head> <title>Online Trading Data</title> <meta charset="utf-8">
<!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>
网上交易数据
[ng:\：斗篷]，[ng斗篷]，.ng斗篷{显示：无；}
html，
身体{
宽度：100%；
身高：100%；
边际：0px；
}
#沙特迪夫{
宽度：100%；
身高：50%；
}
#选择器{
位置：绝对位置；
顶部：20px；
右：20px；
背景：rgba（255，255，255，0.7）；
填充：10px；
字体大小：16px；
}
#选择器输入，
#选择器选择{
填充物：5px；
}
.ammapDescriptionTitle{
字体大小：15px；
字体大小：粗体；
颜色：#000；
}
.AMMAPDescriptionContext{
最大高度：200px；
溢出：自动；
边框：1px实心；
背景色：#dedede；
颜色：#000；
}
.ammapDescriptionText img、.ammapDescriptionText p{
最大宽度：95%；
}
var scotchApp=angular.module（'scotchApp'，['ngRoute']）；
//配置我们的路线
scotchApp.config（函数（$routeProvider）{
$routeProvider
//主页的路径
。当（“/”{
模板：“sdsd”，
控制器：“主控制器”
})
.when（“/关于”{
模板：“第二页”，
控制器：“关于控制器”
})
。当（“/联系人”{
模板：“第三页”，
控制器：“contactController”
});
});
scotchApp.controller（'mainController'，函数（$scope）{
var相关城市=[
{
“标题”：“柏林”，
“纬度”：52.5235，
“经度”：13.4115
},{
“头衔”：“摩纳哥”，
“纬度”：43.7325，
“经度”：7.4189
},{
“标题”：“莫斯科”，
“纬度”：55.7558，
“经度”：37.6176
},{
“标题”：“马德里”，
“纬度”：40.4167，
“经度”：-3.7033
},{
“头衔”：“伦敦”，
“纬度”：51.5002，
“经度”：-0.1262
},{
“标题”：“新德里”，
“纬度”：28.6353，
“经度”：77.2250
},{
“头衔”：“耶路撒冷”，
“纬度”：31.7857，
“经度”：35.2007
},{
“标题”：“东京”，
“纬度”：35.6785，
“经度”：139.6823
},{
“标题”：“曼谷”，
“纬度”：13.7573，
“经度”：100.5020
}, {
“头衔”：“阿布扎比”，
“纬度”：24.4764，
“经度”：54.3705
},{
“标题”：“华盛顿”，
“纬度”：38.8921，
“经度”：-77.0241，
“颜色”：“000”
}
];
9.9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 10 10 10 10 10 10 10 10 10 10 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 1.5,7.067,12.5,9z”；
var map=AmCharts.makeChart（“chartdiv”{
“类型”：“地图”，
“主题”：“光”，
“图像设置”：{
“滚动颜色”：“#000”，
“滚动刻度”：1，
“选定比例”：1，
“selectedColor”：“红色”，
“颜色”：“13564e”
},
“区域设置”：{
“未分类颜色”：“#000”
},
“数据提供者”：{
“地图”：“世界地图”，
“图像”：[]
}
} );
//加载页面时填充城市下拉列表
AmCharts.ready（函数（）{
相关城市。forEach（函数（arrayItem）
{
var city=arrayItem；
city.svgPath=targetSVG；
city.zoomLevel=3；
城市规模=1.2；
city.label=city.title+“+25%”；
city.color=“绿色”；
//city.description=“伦敦是英国和英国的首都和人口最多的城市。伦敦位于泰晤士河上，两千年来一直是一个重要的定居点，其历史可以追溯到罗马人将其命名为Londinium的建国。伦敦的古老核心——伦敦城，基本上保留了1.12平方英里的面积（2.9平方公里）中世纪边界，2011年常住人口为7375人，使其成为英国最小的城市。至少从19世纪起，伦敦一词也指围绕这一核心发展起来的大都市。这一城市群的大部分形成了大伦敦行政区（与伦敦地区接壤），由伦敦市长和伦敦议会管理。“；
//将城市对象添加到地图
map.dataProvider.images.push（城市）；
map.validateData（）；
});
} );
});
scotchApp.controller（'aboutController'，函数（$scope）{
$scope.message='看！我是一个关于页面'；
});
scotchApp.controller（'contactController'，函数（$scope）{
$scope.message='联系我们！JK.这只是一个演示'；
});
AmCharts.readywindow.onload 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();
}
}
]
});