AngularJS Google Map（ng-map）图标网址不起作用答案

【问题标题】：AngularJS Google Map (ng-map) icon url not workingAngularJS Google Map（ng-map）图标网址不起作用
【发布时间】：2016-06-19 04:47:47
【问题描述】：

由于某种原因，当我使用绝对网址而不是相对网址时，我的标记没有显示。

在我看来，我使用：

<marker ... icon="{url: '{{markerSrc}}'}"></marker>

当我这样做时（在我的控制器中）：

$scope.markerSrc = "/images/marker.png";

一切正常并显示图标

但是当我这样做时：

$scope.markerSrc = "http://complete/path/to/marker/images/marker.png";

我得到一个错误：

GET http://localhost:9000/%7Burl:%20'http://complete/path/to/marker/images/marker.png'%7D 404 (Not Found)

我尝试了不同的方法，例如

<marker ... icon="{url: "'{{markerSrc}}'" }"></marker>
<marker ... icon="{url: "{{markerSrc}}" }"></marker>
<marker ... icon="{url: {{markerSrc}} }"></marker>

但似乎没有一个工作......

【问题讨论】：

奇怪，它实际上是把{url:作为URL的一部分。

标签： javascript angularjs google-maps ng-map

【解决方案1】：

尝试将marker指令icon属性语法从：

<marker ... icon="{url: '{{markerSrc}}'}"></marker>

到

<marker ... icon="{{markerSrc}}"></marker>

示例

var app = angular.module('appMaps', ['ngMap']);
app.controller('mapCtrl', function ($scope) {
    

    $scope.cities = [
       { id: 1, name : "Brisbane", location: [-33.867396, 151.206854] },
        { id: 2, name: "Sydney", location: [-27.46758, 153.027892] },
        { id: 3, name: "Perth", location: [-31.953159, 115.849915] }
    ];


    $scope.markerSrc = "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="4">
            <marker id='ID{{city.id}}' ng-repeat="city in cities" position="{{city.location}}" icon="{{markerSrc}}"   >
            </marker>
            
        </map>
</div>

【讨论】：