带有参数的 Ng 地图标记图标（url 到托管图像）不起作用

Question

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

似乎 url 在 url 之前有一个带有 "localhost:8000" 的前缀，我得到一个错误：

GET http://localhost:8100/%7Burl:%20https://graph.facebook.com/1716361775351742/picture?type=normal,%20anchor:%20[0,0]} 404 (Not Found)

这是我这边的错误还是语法错误？谢谢

Answer 1

是的，可能是一个错误。到目前为止一直试图找到文档，但找不到。可能是 RegEx 问题

如果还在寻找，请删除协议，然后尝试。所以你的 url 看起来像这样。

helper.facebook.freshURL = '//graph.facebook.com/1716361775351742/picture?type=normal';

让我们知道。

Answer 2

此行为与解析表达式时发生的 JSON 错误有关：{url: '{{helper.facebook.freshURL}}', anchor: [0,0]}

一旦为 icon 属性提供 valid 表达式，例如 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>

带有参数的 Ng 地图标记图标（url 到托管图像）不起作用

Ng map marker icon with params (url to hosted image) not working

javascript

google-maps

google-maps-markers

angularjs

ng-map