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

Posted 2023-03-28

【中文标题】带有参数的 Ng 地图标记图标（托管图像的 URL）不起作用

【英文标题】：Ng map marker icon with params (url to hosted image) not working

【发布时间】：2017-10-05 17:29:56

【问题描述】：

在 ng 地图中这是有效的：

<marker ng-repeat="helper in helpers" position="helper.position" optimized="false" icon=helper.facebook.freshURL"></marker>

但如果我在“图标”中输入参数：

<marker ng-repeat="helper in helpers" position="helper.position" optimized="false" icon="url: 'helper.facebook.freshURL', anchor: [0,0]"></marker>

好像url前面有个前缀“localhost:8000”，报错：

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

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

【参考方案1】：

此行为与解析表达式时发生的 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='IDcity.id' ng-repeat="city in cities" position="city.location" icon="iconProperties" -->
            <marker id='IDcity.id' ng-repeat="city in cities" position="city.location" icon='"url":"iconUrl","anchor":[0,0]'>
            </marker>
            
        </map>
</div>

【讨论】：

感谢 Vadim，菜鸟的错误。但是，现在我收到错误消息：“InvalidValueError: setIcon: not a string; and no url property; and no path property”。你知道是什么原因造成的吗？

或者如果我使用“custom-marker”，我会收到错误：“TypeError: Cannot read property 'className' of null”，并且标记不会呈现。有什么想法吗？

【参考方案2】：

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

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

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

让我们知道。