如何删除在谷歌地图折线 [英] how to remove polyline on google map

问题描述

下面是code，我有我的程序编写上的谷歌地图绘制折线

below is code that i have to write in my program for draw polyline on google map

假设response.SelectedTruck.length = 150

suppose response.SelectedTruck.length=150

值包含response.SelectedTruck的纬度和经度

value contain in response.SelectedTruck is latitude and longitude

我要推并购变量的所有经度和纬度值

i have to push all latitude and longitude value in m variable

            //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);
                                   }

这code我画折线在地图上，我选择第一个ID，然后它会

for this code i draw polyline on map and i select first id then it will

是绘制折线在地图上，但之后我选择第二个ID，则旧

be draw the polyline on the map but after i select second id then the old

折线不是在map.so如何删除折线删除，如果我选择其他的ID？

polyline was not remove on the map.so how to remove the polyline if i select other id ?

推荐答案

由于您只在一个地图引用。你必须对那是previously绘制并设置它的地图为null折线的参考。

Since you are only referencing on one map. you must have a reference on the Polyline that was previously drawn and set it's map to null.

要做到这一点，最简单的方法是在全球范围内声明的变量userCoordinate并创建新折线之前设置地图为空

The easiest way to do this is to declare your userCoordinate variable globally and set the map to null before creating a new Polyline

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);
          }

另一种选择是创建一个新地图，并用它来新的折线（但它会导致你的地图重新加载）

Another option is to create a new map and use it to the new Polyline (But it will cause your map to reload)

           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);
            }

这篇关于如何删除在谷歌地图折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！