由于http.get angular foreach，地图标记重复出现

Question

我是angularjs和javascript的新手。 我决定尝试该项目，以尝试熟悉这些技术。 我能够在第一页加载时创建标记，但是当我添加标记或删除标记时，它会重新加载数据库中存储的所有标记。

我有refreshPage（）; 从而不必每次添加或删除标记时都刷新页面，但是angular.foreach会使其重新加载每个标记，包括地图上显示的标记。

有没有更好的方法可以做到这一点。 我尝试将每个角度放置在另一个http.get中，然后创建一个createmarker（item），但这没有用。 哪个是处理此数组，其他方法或其他方法的最佳方法？

任何帮助表示赞赏。

controller.js

    var myApp = angular.module('myApp', []);

    myApp.controller('AppCtrl', ['$scope', '$http', function ($scope, $http) {

        var count = 1;

        $http.get('/locations').success(function (data) {
            angular.forEach(data.items, function (item) {
                createMarker(item);
            });
        });

        var refreshPage = function() {
            $http.get('/locations').success(function (data) {
                $scope.items = data.items;
            });
            $scope.item = "";
        };

        refreshPage();

        $scope.addLocation = function(){
            $http.post('/locations', $scope.item);
            refreshPage();
        };

        $scope.removeLocation = function(id){
          $http.delete('/locations/'+id).success(function(response){
              refreshPage();
          });
        };


        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(41.5, -73),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        }

        $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

        $scope.markers = [];

        var infoWindow = new google.maps.InfoWindow();

        var createMarker = function (info) {

            var marker = new google.maps.Marker({
                map: $scope.map,
                position: new google.maps.LatLng(info.lat, info.long),
                title: info.city
            });
            marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';

            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                infoWindow.open($scope.map, marker);
            });

            $scope.markers.push(marker);

        }
        $scope.openInfoWindow = function (e, selectedMarker) {
            e.preventDefault();
            google.maps.event.trigger(selectedMarker, 'click');
        }


    }]);

index.html

    <!DOCTYPE html>
    <html  ng-app="myApp">
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>
        <link rel="stylesheet" href="public/css/maps.css">
        <title>My Contact Book</title>
    </head>
    <body  ng-controller="AppCtrl">
    <div class="container">

        <h1>map here</h1>
        <div>

            <div id="map"></div>

            <div id="repeat" ng-repeat="marker in markers | orderBy : 'title'">
                <a id="country_container" href="#" ng-click="openInfoWindow($event, marker)">
                    <label id="names" >{{marker.title}}</label></a>
            </div>

        </div>

    <div>
        <h1>My Contact Book</h1>
        {{ greeting }}
        <table class="table">
            <thead>
            <tr>
                <th>City</th>
                <th>State</th>
                <th>Description</th>
                <th>Latitude</th>
                <th>Longitude</th>
                <th>Action</th>
            <tbody>
                <tr>
                    <td><input class="form-control" ng-model="item.city"></td>
                    <td><input class="form-control" ng-model="item.state"></td>
                    <td><input class="form-control" ng-model="item.desc"></td>
                    <td><input class="form-control" ng-model="item.lat"></td>
                    <td><input class="form-control" ng-model="item.long"></td>
                    <td><button class="btn-primary" ng-click="addLocation()">Add Location</button></td>
                </tr>
            <tr ng-repeat="item in items">
                <td>{{item.city}}</td>
                <td>{{item.state}} </td>
                <td>{{item.desc}} </td>
                <td>{{item.lat}}</td>
                <td>{{item.long}}</td>
                <td><button class="btn btn-danger" ng-click="removeLocation(item.desc)">Delete</button></td>
            </tr>
            </tbody>
        </table>
    </div>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.js"></script>
            <script src="/controllers/controller.js"></script>
    </body>
    </html>

Answer 1

您需要先删除它们，然后再添加更多，将每个标记上的地图设置为空：

for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
}

请点击此链接以获取更多信息： https : //developers.google.com/maps/documentation/javascript/examples/marker-remove

由于http.get angular foreach，地图标记重复出现

问题描述

1 个解决方案

解决方案1
0 2015-12-16 21:30:26

由于http.get angular foreach，地图标记重复出现

问题描述

1 个解决方案

解决方案1 0 2015-12-16 21:30:26

解决方案1
0 2015-12-16 21:30:26