角JS - jvector地图访问和QUOT; onRegionClick＆QUOT; [英] Angular JS - jvector map accessing "onRegionClick"
本文介绍了角JS - jvector地图访问和QUOT; onRegionClick＆QUOT;的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建一个仪表板，我想添加这个美国地图，当我点击任何区域，我希望它的人口要从 cities.json <打印出网页上/ code>文件。
导入JSON文件服务。
App.factory（'citiesData'，['$ HTTP'，函数（$ HTTP）{ 返回{ getMessageData：功能（）{ 返回$ HTTP（{方法：GET，网址：'../app/_data/usa-cities.json'}） 。然后（功能（响应）{ 返回response.data; }，功能（errorResponse）{ 扔errorResponse.status; }）; } }}]）;
我创建了jvectormap插件指令，一切都工作得很好。
下面是我的指令，code。
App.directive（'马普沙'，[功能（）{ 返回{ 限制：'A'，
链接：功能（范围，元素，ATTRS）{ element.vectorMap（{
图：us_aea_en'，
的backgroundColor：'透明'，
zoomButtons：假的，
regionStyle：{
初步：{
填写：'＃343434'
}，
悬停：{
填写：'＃242424'
}
}，
onRegionClick：函数（事件，code）{ }，
markerStyle：{
初步：{
填写：＃F0A518'，
行程：'＃F0A518'，
}
}，
标记：
{经纬度：[37.78，-122.41]，名称：'旧金山'，风格：{R：10}}，
{经纬度：[40.71，-74]，名称：'纽约'，风格：{R：15}}，
{经纬度：[41.89，-87.62]，名称：'芝加哥'，风格：{R：5}}，
{经纬度：[34.00，-118.25]，名称：洛杉矶，样式：{R：20}}，
{经纬度：[34.00，-106.00]，名称：新墨西哥，样式：{R：10}}，
{经纬度：[44.50，-100.00]，名称：南达科他州，样式：{R：13}}，
{经纬度：[25.78，-80.22]，名称：迈阿密，样式：{R：7}}，
]
}）; } }}]）
样JSON：
{US-AL：{名：阿拉巴马，人口：4833722}，美AK：{名：阿拉斯加 人口：735132}
HTML
＆LT; DIV CLASS =COL-MD-8＆GT;
＆LT; DIV CLASS =地图容器填充，所有-15＆GT;
＆LT; DIV CLASS =地图，美国利润率底-15地图美国＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-4＆GT;
＆LT; DIV CLASS =头容器＆GT;
＆LT; H4＆GT;人口与LT; / H4＆GT;
＆LT;跨度＆GT;＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
在 code 参数的 onRegionClick 返回我的code和我创建了一个对象在 cities.json 文件中的每个code。
- 我想知道我怎么不能访问该服务的指令内的控制器。
- 如何访问
onRegionClick来获得code和恢复该地区的相应数据点击。
- 使用jQuery插件，并试图使用数据角度的结合是正确的方法还是有一个必须遵循这个场景？ 任何其他方法
先谢谢了。
解决方案
您可以做这样的事情。
VAR MDATA;
app.controller（'MapCtrl'，['$范围，$位置，$ HTTP'，函数（$范围，$位置$ HTTP）{ $ http.get（'AJAX / data.json'）。成功（功能（数据，状态，头，配置）{
MDATA =数据;
// $ scope.mapdata =数据;
}）错误（功能（数据，状态，头，配置）{ 警报（错误检索数据）;
}）}]）;app.directive（马普沙，[功能（）{
返回{
限制：'A'，
链接：功能（范围，元素，ATTRS）{
范围。$表（MDATA功能（N，O）{
$（元素）.vectorMap（{
图：world_mill_en'，
的backgroundColor：透明的，
regionStyle：{
初步：{
填写：＃e4e4e4，
填充不透明度：1，
行程：'无'，
笔画宽度：0，
中风不透明度：1
}
}，
系列：{
区域：[{
值：MDATA，
规模：[＃92c1dc，＃ebf4f9]，
normalizeFunction：多项式
}]
}，
onRegionLabelShow：功能（E，EL，code）{ 如果（typeof运算MDATA [code]！=未定义）
el.html（el.html（）+：+ MDATA [code] +'新访问者'）;
}，
onRegionClick：函数（事件，code）{ }，
markerStyle：{
初步：{
填写：＃F0A518'，
行程：'＃F0A518
}
}
}）;
}）; }}
}]）;
I'm creating a dashboard and I wanted to add this USA map and when I click on any of the region I want it's population to be printed out on the web page from the cities.json file.
Service for importing the json file.
App.factory('citiesData', ['$http', function($http) {
return {
getMessageData : function () {
return $http({ method: 'GET', url: '../app/_data/usa-cities.json'})
.then(function(response) {
return response.data;
}, function(errorResponse) {
throw errorResponse.status;
});
}
}
}]);
I created a directive for the jvectormap plugin and everything's working just fine.
Here's my directive code.
App.directive('mapUsa', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.vectorMap({
map: 'us_aea_en',
backgroundColor: 'transparent',
zoomButtons: false,
regionStyle: {
initial: {
fill: '#343434'
},
hover: {
fill: '#242424'
}
},
onRegionClick: function(event, code) {
},
markerStyle: {
initial: {
fill: '#F0A518',
stroke: '#F0A518',
}
},
markers: [
{latLng: [37.78, -122.41], name: 'San Francisco', style: {r: 10}},
{latLng: [40.71, -74], name: 'New York City', style: {r: 15}},
{latLng: [41.89, -87.62], name: 'Chicago', style: {r: 5}},
{latLng: [34.00, -118.25], name: 'Los Angeles', style: {r: 20}},
{latLng: [34.00, -106.00], name: 'New Mexico', style: {r: 10}},
{latLng: [44.50, -100.00], name: 'South Dakota', style: {r: 13}},
{latLng: [25.78, -80.22], name: 'Miami', style: {r: 7}},
]
});
}
}
}])
Sample JSON :
{ "US-AL": { "name": "Alabama", "population": 4833722 }, "US-AK": { "name": "Alaska", "population": 735132 }
HTML :
<div class="col-md-8">
<div class="map-container padding-all-15">
<div class="map-usa margin-bottom-15" map-usa></div>
</div>
</div>
<div class="col-md-4">
<div class="header-container">
<h4>Population</h4>
<span></span>
</div>
</div>
The code param in the onRegionClick returns me the code and I created a object for each code in the cities.json file.
- I wanted to know how can I not access that service in a controller inside the directive.
- How can I access the
onRegionClickto get the code and retrieve the respective data of the region clicked.
- Using a jquery plugin and trying to use the data binding of angular is the correct method or is there any other method that has to be followed for this scenario?
Thanks in advance.
解决方案
You may do something like this
var mdata;
app.controller('MapCtrl',['$scope','$location','$http', function($scope, $location,$http) {
$http.get('ajax/data.json').success(function(data, status, headers, config){
mdata = data;
// $scope.mapdata = data;
}).error(function(data, status, headers, config) {
alert("Error retrieving data");
})
}]);
app.directive("mapUsa", [function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch("mdata", function (n, o) {
$(element).vectorMap({
map: 'world_mill_en',
backgroundColor: "transparent",
regionStyle: {
initial: {
fill: '#e4e4e4',
"fill-opacity": 1,
stroke: 'none',
"stroke-width": 0,
"stroke-opacity": 1
}
},
series: {
regions: [{
values: mdata,
scale: ["#92c1dc", "#ebf4f9"],
normalizeFunction: 'polynomial'
}]
},
onRegionLabelShow: function (e, el, code) {
if (typeof mdata[code] != "undefined")
el.html(el.html() + ': ' + mdata[code] + ' new visitors');
},
onRegionClick: function (event, code) {
},
markerStyle: {
initial: {
fill: '#F0A518',
stroke: '#F0A518'
}
}
});
});
}
}
}]);
这篇关于角JS - jvector地图访问和QUOT; onRegionClick＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
