如何通过 $scope.extend 将动态 $scope 传递到传单中心和标记
How to pass dynamic $scope via $scope.extend to leaflet center and marker
现状：
我有一个 api/json-string，其中包含飞机起飞和降落位置的地理定位数据（每个纬度和经度），如您在控制台右上角所见。
如果我使用示例数据或硬编码的纬度和经度数字，我有一个有效的传单指令。
但我想做以下事情：
1）将中心添加到起飞位置
2) 在起飞位置画一个标记
3) 在登陆位置画一个标记
问题：
如果我使用 $scope 甚至变量 (var = data.jsonvar)，传单容器会保持灰色并显示错误消息。
问题：
api 提供了如何绘制这些标记并将中心设置为数据？
查看：
<leaflet width="100%" height="500px" markers="markers" center="centerMap"></leaflet>
控制器：
showTrackDetails = function (trackId) {
// Holt die Informationen zum Flug und öffnet im Success-Fall das Modal mit den Informationen
$http({
method: 'POST',
url: xxx
data: {
userId: $localStorage.currentUser,
userApikey: $localStorage.apiKey,
func: 'trackData',
trackId: trackId
},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function (data) {
/* ==== MARKER START/ZIEL ==== */
// Holt Marker-Positionen aus der JSON-Antwort
$scope.markerTakeoffLat = data.markerTakeoffLat;
$scope.markerTakeoffLng = data.markerTakeoffLng;
$scope.markerLandingLat = data.markerLandingLat;
$scope.markerLandingLng = data.markerLandingLng;
// Setzt den MAP-Fokus auf den Startflughafen
angular.extend($scope, {
centerMap: {
//lat: 51.505,
//lng: -0.09,
lat: $scope.markerTakeoffLat,
lng: $scope.markerTakeoffLng,
zoom: 8
},
markers: {}
});
// Setzt die beiden Marker in die Map
angular.extend($scope, {
markers: {
markerTakeoff: {
//lat: 51.505,
//lng: -0.09,
lat: $scope.markerTakeoffLat,
lng: $scope.markerTakeoffLng,
//message: "I'm a static marker",
draggable: false
},
markerLanding: {
//lat: 51,
//lng: 0,
lat: $scope.markerLandingLat,
lng: $scope.markerLandingLng,
focus: true,
//message: "Hey, drag me if you want",
draggable: false
}
}
});
}); // Ende .success
};
// onClickEvent (Show Track in Map-Modal)
$scope.showTrackDetails = function(trackId){
showTrackDetails(trackId);
};
用于测试的样本 JSON/API-Output：
{"trackId":"14","logbookid":"0","public":"1","waypoints":"1443345806571|51.4034139|6.9406291|244|66|29;1443345915427|51.4276257|6.9685559|531|335|41.5;1443346042404|51.4655081|6.9116662|663|340|42;1443346154427|51.5066894|6.9035492|675|4|29.75;1443346269492|51.5411881|6.9023895|1026|352|34.5;1443346385475|51.578387|6.8949114|1280|358|39.25;1443346482089|51.6139763|6.8965465|1373|3|41.752994537353516;1443346603144|51.6605393|6.8944484|1418|351|45.002777099609375;1443346705498|51.7009922|6.8874368|1410|357|43.502872467041016;1443346789493|51.7342175|6.8843293|1401|355|44.75279235839844;1443346861445|51.7624781|6.8817369|1396|357|44.00284194946289;1443346951496|51.7979765|6.8780592|1394|356|43.502872467041016;1443347014911|51.8226123|6.8795048|1402|4|44.25282287597656;1443347075854|51.8465136|6.8769062|1400|352|43.502872467041016;1443347193422|51.8928339|6.8720631|1391|357|43.252891540527344;1443347253415|51.9157133|6.8723428|1384|2|42.5029411315918;1443347313414|51.9382442|6.8763271|1372|9|42.252960205078125;1443347390479|51.9652399|6.8872517|1369|17|40.50308609008789;1443347466402|51.9799349|6.9206835|1364|68|39.753143310546875;1443347559538|51.9964971|6.969501|1279|55|39.753143310546875;1443347643471|52.0130553|7.0108174|1253|58|39.753143310546875;1443347703747|52.0248678|7.0409258|1247|60|40.00312423706055;1443347763805|52.0328008|7.0729704|1236|73|40.00312423706055;1443347822704|52.0392404|7.1067839|1221|69|40.5;1443347882706|52.0459711|7.140825|1190|73|41.5;1443347943793|52.0523324|7.1763928|1173|72|40.75;1443348003782|52.0594154|7.2107625|1150|74|44.5;1443348063936|52.0698866|7.2416742|1094|54|42.75;1443348132969|52.0867675|7.2741101|1005|52|41.5;1443348197498|52.1048507|7.2987282|876|36|42.5;1443348282430|52.1271505|7.3378987|685|53|43.75;1443348356500|52.1425242|7.3765305|591|61|44;1443348486440|52.1655872|7.4502212|452|67|42.75;1443348574543|52.1799935|7.5014238|482|59|42.75;1443348679438|52.1982497|7.5586922|568|77|43.75;1443348780628|52.2076796|7.6216782|577|75|42.75;1443348852270|52.2156638|7.6652717|536|74|42.75;1443348922504|52.2217186|7.7080782|523|74|41.75;1443348986442|52.2330283|7.7440682|519|55|43.25;1443349074264|52.2502821|7.7910733|485|62|42.5;1443349178209|52.261576|7.8540636|476|80|43;1443349287101|52.2823998|7.8995987|368|57|41;1443349397446|52.2866062|7.9615992|141|91|31;","lfzid":"4","savedate":"2015-09-27 12:26:36","markerTakeoffLat":"51.4034139","markerTakeoffLng":"6.9406291","markerLandingLat":"52.2866062","markerLandingLng":"7.9615992"}
谢谢。
您正在为 lat 和 lng 传递字符串，因为您的 JSON 响应将这些属性定义为字符串而不是数字。您需要使用数字经纬度。
一个简单的解决方法是在分配给范围时使用 + 将数据强制转换为数字，如下所示：
$scope.markerTakeoffLat = +data.markerTakeoffLat;
$scope.markerTakeoffLng = +data.markerTakeoffLng;
$scope.markerLandingLat = +data.markerLandingLat;
$scope.markerLandingLng = +data.markerLandingLng;
这是 a working JS Fiddle with your sample data 的例外情况：
$scope.addMarkers = function() {
angular.extend($scope, {
markers: {
markerTakeoff: {
lat: +data.markerTakeoffLat,
lng: +data.markerTakeoffLng,
message: "I'm a static marker",
draggable: false
}
}
});
};
现状：
我有一个 api/json-string，其中包含飞机起飞和降落位置的地理定位数据（每个纬度和经度），如您在控制台右上角所见。
如果我使用示例数据或硬编码的纬度和经度数字，我有一个有效的传单指令。
但我想做以下事情： 1）将中心添加到起飞位置 2) 在起飞位置画一个标记 3) 在登陆位置画一个标记
问题： 如果我使用 $scope 甚至变量 (var = data.jsonvar)，传单容器会保持灰色并显示错误消息。
问题： api 提供了如何绘制这些标记并将中心设置为数据？
查看：
<leaflet width="100%" height="500px" markers="markers" center="centerMap"></leaflet>
控制器：
showTrackDetails = function (trackId) {
// Holt die Informationen zum Flug und öffnet im Success-Fall das Modal mit den Informationen
$http({
method: 'POST',
url: xxx
data: {
userId: $localStorage.currentUser,
userApikey: $localStorage.apiKey,
func: 'trackData',
trackId: trackId
},
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function (data) {
/* ==== MARKER START/ZIEL ==== */
// Holt Marker-Positionen aus der JSON-Antwort
$scope.markerTakeoffLat = data.markerTakeoffLat;
$scope.markerTakeoffLng = data.markerTakeoffLng;
$scope.markerLandingLat = data.markerLandingLat;
$scope.markerLandingLng = data.markerLandingLng;
// Setzt den MAP-Fokus auf den Startflughafen
angular.extend($scope, {
centerMap: {
//lat: 51.505,
//lng: -0.09,
lat: $scope.markerTakeoffLat,
lng: $scope.markerTakeoffLng,
zoom: 8
},
markers: {}
});
// Setzt die beiden Marker in die Map
angular.extend($scope, {
markers: {
markerTakeoff: {
//lat: 51.505,
//lng: -0.09,
lat: $scope.markerTakeoffLat,
lng: $scope.markerTakeoffLng,
//message: "I'm a static marker",
draggable: false
},
markerLanding: {
//lat: 51,
//lng: 0,
lat: $scope.markerLandingLat,
lng: $scope.markerLandingLng,
focus: true,
//message: "Hey, drag me if you want",
draggable: false
}
}
});
}); // Ende .success
};
// onClickEvent (Show Track in Map-Modal)
$scope.showTrackDetails = function(trackId){
showTrackDetails(trackId);
};
用于测试的样本 JSON/API-Output：
{"trackId":"14","logbookid":"0","public":"1","waypoints":"1443345806571|51.4034139|6.9406291|244|66|29;1443345915427|51.4276257|6.9685559|531|335|41.5;1443346042404|51.4655081|6.9116662|663|340|42;1443346154427|51.5066894|6.9035492|675|4|29.75;1443346269492|51.5411881|6.9023895|1026|352|34.5;1443346385475|51.578387|6.8949114|1280|358|39.25;1443346482089|51.6139763|6.8965465|1373|3|41.752994537353516;1443346603144|51.6605393|6.8944484|1418|351|45.002777099609375;1443346705498|51.7009922|6.8874368|1410|357|43.502872467041016;1443346789493|51.7342175|6.8843293|1401|355|44.75279235839844;1443346861445|51.7624781|6.8817369|1396|357|44.00284194946289;1443346951496|51.7979765|6.8780592|1394|356|43.502872467041016;1443347014911|51.8226123|6.8795048|1402|4|44.25282287597656;1443347075854|51.8465136|6.8769062|1400|352|43.502872467041016;1443347193422|51.8928339|6.8720631|1391|357|43.252891540527344;1443347253415|51.9157133|6.8723428|1384|2|42.5029411315918;1443347313414|51.9382442|6.8763271|1372|9|42.252960205078125;1443347390479|51.9652399|6.8872517|1369|17|40.50308609008789;1443347466402|51.9799349|6.9206835|1364|68|39.753143310546875;1443347559538|51.9964971|6.969501|1279|55|39.753143310546875;1443347643471|52.0130553|7.0108174|1253|58|39.753143310546875;1443347703747|52.0248678|7.0409258|1247|60|40.00312423706055;1443347763805|52.0328008|7.0729704|1236|73|40.00312423706055;1443347822704|52.0392404|7.1067839|1221|69|40.5;1443347882706|52.0459711|7.140825|1190|73|41.5;1443347943793|52.0523324|7.1763928|1173|72|40.75;1443348003782|52.0594154|7.2107625|1150|74|44.5;1443348063936|52.0698866|7.2416742|1094|54|42.75;1443348132969|52.0867675|7.2741101|1005|52|41.5;1443348197498|52.1048507|7.2987282|876|36|42.5;1443348282430|52.1271505|7.3378987|685|53|43.75;1443348356500|52.1425242|7.3765305|591|61|44;1443348486440|52.1655872|7.4502212|452|67|42.75;1443348574543|52.1799935|7.5014238|482|59|42.75;1443348679438|52.1982497|7.5586922|568|77|43.75;1443348780628|52.2076796|7.6216782|577|75|42.75;1443348852270|52.2156638|7.6652717|536|74|42.75;1443348922504|52.2217186|7.7080782|523|74|41.75;1443348986442|52.2330283|7.7440682|519|55|43.25;1443349074264|52.2502821|7.7910733|485|62|42.5;1443349178209|52.261576|7.8540636|476|80|43;1443349287101|52.2823998|7.8995987|368|57|41;1443349397446|52.2866062|7.9615992|141|91|31;","lfzid":"4","savedate":"2015-09-27 12:26:36","markerTakeoffLat":"51.4034139","markerTakeoffLng":"6.9406291","markerLandingLat":"52.2866062","markerLandingLng":"7.9615992"}
谢谢。
您正在为 lat 和 lng 传递字符串，因为您的 JSON 响应将这些属性定义为字符串而不是数字。您需要使用数字经纬度。
一个简单的解决方法是在分配给范围时使用 + 将数据强制转换为数字，如下所示：
$scope.markerTakeoffLat = +data.markerTakeoffLat;
$scope.markerTakeoffLng = +data.markerTakeoffLng;
$scope.markerLandingLat = +data.markerLandingLat;
$scope.markerLandingLng = +data.markerLandingLng;
这是 a working JS Fiddle with your sample data 的例外情况：
$scope.addMarkers = function() {
angular.extend($scope, {
markers: {
markerTakeoff: {
lat: +data.markerTakeoffLat,
lng: +data.markerTakeoffLng,
message: "I'm a static marker",
draggable: false
}
}
});
};