在 ng map 中,这是有效的:
<marker ng-repeat="helper in helpers" position="{{helper.position}}" optimized="false" icon={{helper.facebook.freshURL}}"></marker>
但是如果我在“icon”中输入参数:
<marker ng-repeat="helper in helpers" position="{{helper.position}}" optimized="false" icon="{url: '{{helper.facebook.freshURL}}', anchor: [0,0]}"></marker>
该网址似乎在网址前面有一个前缀“localhost:8000”,并且出现错误:
GET http://localhost:8100/%7Burl:%20https://graph.facebook.com/1716361775351742/picture?type=normal,%20anchor:%20[0,0]} 404 (Not Found)
这是我这边的错误还是语法错误?谢谢。
最佳答案
此行为与解析表达式时发生的 JSON 错误有关:{url: '{{helper.facebook.freshURL}}',anchor: [0,0]}
为 icon
属性提供有效表达式后,例如 icon='{"url":"{{helper.facebook.freshURL}} ","anchor":[0,0]}'
,标记图标将被正确初始化。
示例
var app = angular.module('appMaps', ['ngMap']);
app.controller('mapCtrl', function ($scope) {
$scope.cities = [
{ id: 1, name : "Brisbane", location: [-33.867396, 151.206854] }
];
$scope.iconProperties = {
url : "http://maps.google.com/mapfiles/marker.png",
anchor: [0,0]
};
$scope.iconUrl = "http://maps.google.com/mapfiles/marker.png";
});
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="appMaps" ng-controller="mapCtrl">
<map center="[-24.667856, 133.630694]" zoom="3">
<!--marker id='ID{{city.id}}' ng-repeat="city in cities" position="{{city.location}}" icon="{{iconProperties}}" -->
<marker id='ID{{city.id}}' ng-repeat="city in cities" position="{{city.location}}" icon='{"url":"{{iconUrl}}","anchor":[0,0]}'>
</marker>
</map>
</div>
关于javascript - 带有参数(托管图像的 URL)的 Ng map 标记图标不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43835331/