如何在谷歌地图上删除折线

时间:2015-12-12 05:03:35

标签: angularjs google-maps

下面是我必须在我的程序中为谷歌地图上的绘制折线写的代码

假设response.SelectedTruck.length = 150

值包含在response.SelectedTruck中是纬度和经度

我必须将所有纬度和经度值推入m变量

            //code for draw polyline
            for (var i = 0; i < response.SelectedTruck.length; i++) {
                      var m = response.SelectedTruck[i];
                           (function (n) {
                               setTimeout(function () {
                                path.push(new google.maps.LatLng(parseFloat(n.lat), parseFloat(n.lang)));
                                  addPolyline(path);
                                 }, i * 1000);
                                }(m));
                              }
                             function addPolyline(m) {
                               var userCoordinate = new google.maps.Polyline({
                                     path: m,
                                     strokeColor: 'blue',
                                     strokeOpacity: 2,
                                     strokeWeight: 2,
                                     icons: [{
                                         icon: lineSymbol,
                                          offset: '100%'
                                          }]
                                      });
                                     userCoordinate.setMap(map);
                                   }

对于这段代码,我在地图上绘制折线,然后我选择第一个ID,然后它将

在地图上绘制折线,但在我选择第二个ID然后选择旧的

折线未在地图上删除。如果我选​​择其他ID,如何删除折线?

1 个答案:

答案 0 :(得分:1)

由于您只在一张地图上引用。你必须在之前绘制的折线上有一个参考,并将它的地图设置为空。

最简单的方法是全局声明userCoordinate变量并在创建新折线之前将地图设置为null

var userCoordinate;



               .............
               .............

         function addPolyline(m) {
                userCoordinate.setMap(null);
                userCoordinate = new google.maps.Polyline({
                                 path: m,
                                 strokeColor: 'blue',
                                 strokeOpacity: 2,
                                 strokeWeight: 2,
                                 icons: [{
                                     icon: lineSymbol,
                                      offset: '100%'
                                      }]
                                  });

               userCoordinate.setMap(map);
          }

另一种选择是创建一个新地图并将其用于新的折线(但它会导致地图重新加载)

           function addPolyline(m) {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 3,
                    center: {lat: 0, lng: -180},
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                 });

                var userCoordinate = new google.maps.Polyline({
                                 path: m,
                                 strokeColor: 'blue',
                                 strokeOpacity: 2,
                                 strokeWeight: 2,
                                 icons: [{
                                     icon: lineSymbol,
                                      offset: '100%'
                                      }]
                                  });

                                 userCoordinate.setMap(map);
            }