Question

使用Angular-Google-Maps-Native插件，当我更改JavaScript中的信息时，我的地图不会更新。我相信我的问题是地图的$范围，而不是我正在运行的控制器。

HTML的子样本

<md-content flex id="content" class="md-whiteframe-z2">
    <div ng-init="coords={latitude: false, longitude: false}">
        <gm-map options="{center: [{{ScheduleCard.Latitude}}, {{ScheduleCard.Longtitude}}], zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP}">
            <gm-marker options="{position: [{{ScheduleCard.Latitude}}, {{ScheduleCard.Longtitude}}], draggable: false}">
                <gm-infowindow options="{content: '{{ScheduleCard.VenueName}}'}"></gm-infowindow>
            </gm-marker>
        </gm-map>
    </div>
</md-content>

JavaScript控制器示例

angular.module('MyApp').controller('ScheduleCtrl', ["$scope", ...
    function($scope, ...) {

//code here to load from Firebase

        $scope.ScheduleCard = {};
        $scope.ScheduleCard.VenueName = '';
        $scope.ScheduleCard.Latitude = 43.630;      // Initial Area 
        $scope.ScheduleCard.Longtitude = -79.699;

// reposition map based on this data        
        $scope.LoadScheduleCard = function(ScheduleInfo) {
            $scope.ScheduleCard.VenueName = ScheduleInfo.VenueName;
            $scope.ScheduleCard.Latitude = ScheduleInfo.Latitude;
            $scope.ScheduleCard.Longtitude = ScheduleInfo.Longtitude;
        };

LoadScheduleCard（）的传统侧面菜单代码

<!-- Container #3 -->
<md-sidenav md-is-locked-open="true" class="md-whiteframe-z2">
        <md-list>
            <md-list-item class="md-3-line" ng-repeat="schedule in Schedules" md-ink-ripple layout="row" layout-align="start center">
                <md-item-content>
                    <div class="inset" ng-click="LoadScheduleCard(schedule)">
                        <ng-md-icon icon="today"></ng-md-icon>
                        <b class="md-subhead">
                            {{schedule.GameDate | SLS_Date}} @ {{schedule.GameTime | SLS_Time:'hh:mm'}}<br />
                            <ng-md-icon icon="place"></ng-md-icon>
                            {{schedule.VenueName}}<br />
                            <ng-md-icon icon="games"></ng-md-icon>
                            {{schedule.HomeTeamName}} vs. {{schedule.AwayTeamName}}<br />
                            <ng-md-icon icon="thumb_up" ng-show="schedule.Wins > 0"></ng-md-icon>
                            <ng-md-icon icon="thumb_down" ng-show="schedule.Losses > 0"></ng-md-icon>
                            <ng-md-icon icon="thumbs_up_down" ng-show="schedule.Ties > 0"></ng-md-icon>
                        </b>
                    </div>
                </md-item-content>
                <md-divider></md-divider>
            </md-list-item>
        </md-list>
</md-sidenav>

Answer 1

我猜你需要删除选项中的{{}} 尝试：

<gm-map options="{center: [ScheduleCard.Latitude, ScheduleCard.Longtitude], zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP}">
    <gm-marker options="{position: [ScheduleCard.Latitude, ScheduleCard.Longtitude], draggable: false}">
        <gm-infowindow options="{content: '{{ScheduleCard.VenueName}}'}"></gm-infowindow>
    </gm-marker>
</gm-map>

动态更新Angular-Google-Maps-Native上的位置

1 个答案: