Angular Google地图自定义图标仅在标记更新时有效

时间:2015-05-20 14:10:21

标签: javascript angularjs google-maps google-maps-api-3 angular-google-maps

当我添加带有图标的标记时,它会显示为默认标记,但是当我在一段时间内更新该位置时,它会开始显示为我想要的自定义图标。

map.html

<ui-gmap-google-map center="map.center"
            control="map.control"
            zoom="map.zoom"
            options="map.options"
            bounds="map.bounds"
            draggable="true">
    <ui-gmap-markers
            models="markerArray"
            coords="'self'"
            icon="'icon'">
    </ui-gmap-markers>
</ui-gmap-google-map>

map.js / addMarker (将标记放入默认图标)

function addMarker(markerId, latitude, longitude, icon, iconSize) {

    markerIconSize = new google.maps.Size(iconSize[0],iconSize[1]);

    var marker = {
        id: markerId,
        latitude: latitude,
        longitude: longitude, 
        icon: {
            url: icon,
            scaledSize: markerIconSize
        }
    };
    $scope.markers.push(marker);
    $scope.markerArray = $scope.markers;
}

map.js / updateMarker (使用自定义图标更新coord。)

function updateMarker(markerId,latitude,longitude) {

     var marker = _.find($scope.markerArray, function(marker) {
          return marker.id = markerId;
     });

     marker.latitude = latitude;
     marker.longitude = longitude;
}

1 个答案:

答案 0 :(得分:2)

我能想到的事情: 尝试对图标网址进行硬编码,看看是否有效。 然后尝试拆分标记声明,所以:

var marker;
var markerOptions = {
    id: markerId,
    latitude: latitude,
    longitude: longitude, 
    icon: {
        url: icon,
        scaledSize: markerIconSize
    }
};
marker = new google.maps.Marker(markerOptions);
$scope.markers.push(marker);
$scope.markerArray = $scope.markers;

这就是我使地图工作的方式,只是给你一个建议。希望它也适合你。