问如何移除google地图上的折线
EN

Stack Overflow用户

提问于 2015-12-12 05:03:35

回答 1查看 359关注 0票数 0

以下是我必须在我的程序中为在google地图上绘制折线而编写的代码

假设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之后

在map.so上没有删除多段线如果我选择了其他id如何删除多段线？

angularjs

google-maps

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 1

Stack Overflow用户

发布于 2015-12-15 08:41:07

因为您只在一个地图上引用。必须在先前绘制的多段线上有参照，并将其映射设置为null。

最简单的方法是在创建新折线之前全局声明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);
            }