无法从地图中隐藏折线

Question

我有一条折线，是通过在地图上单击来绘制的。这工作正常，但出于某种原因我无法从地图中隐藏它。删除和其他一切正常。我几乎尝试了从 setVisible 到 setMap(null) 的所有方法，正如您在下面的代码中所做的那样。

var drawOnMap = function (){

var poly = null;
var path;
var encodedString;
var decodedString;

function drawPolyLine(latLng){

    if(!poly){
        path = new google.maps.MVCArray();
    }
    console.log(latLng);
    path.push(latLng);

    poly = new google.maps.Polyline({
        path: path,
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        editable: true,
        map: map
    });
}

function getPolyLineData(){
    //console.log(path.getPath());
    var firstPoint = path.getAt(0);
    var lastPoint = path.getAt(path.length - 1);

    console.log(firstPoint);

    console.log(lastPoint);

    if ($j("#useWaypoints").is(":checked")) {
        var twaypoints = path.slice(1, path.length - 1);

        var waypoints = [];

        for (var i = 0; i < twaypoints.length; i++) {
            waypoints.push(
                {
                    location: new google.maps.LatLng(twaypoints[i].lat(), twaypoints[i].lng())
                }
            );
        }
    } else {
        waypoints = null;
    }

   return  data = {
                origin: {lat: firstPoint.lat(), lng: firstPoint.lng()},
                destination: {lat: lastPoint.lat(), lng: lastPoint.lng()},
                waypoints: waypoints
            };
}

function removePolyLine(){

    for(var i = path.length; i > 0 ; i--){
        path.pop();
    }
}

function removeLastPoint(){
    if(path.length > 0){
        path.pop();
        poly.setPath(path);
    }
}

function hidePolyLine(){
    console.log("HIDE");
    console.log(poly.getVisible());
    poly.getVisible() ? poly.setVisible(false) : poly.setVisible(true);
    poly.setMap(null);
}

function showPolyLine(){
    console.log("SHOW");
    poly.setVisible(true);
    poly.setMap(map);
}


return {
    drawPolyLine: drawPolyLine,
    getPolyLineData: getPolyLineData,
    removeLastPoint: removeLastPoint,
    removePolyLine: removePolyLine,
    showPolyLine: showPolyLine,
    hidePolyLine: hidePolyLine
}
}();

谁能告诉我为什么这不起作用。根据 Google 地图 API 我是对的。我还发现了几个关于这个主题的问题，但对我没有任何帮助。

更具体一点。为什么这部分不起作用？我看不出有任何理由...

poly.getVisible() ? poly.setVisible(false) : poly.setVisible(true);

polyline-hide

MAPS API v3

Toogle Visablity

编辑：我通过单选按钮调用 hide/show 功能

$j("input[name='editDraw']").change(function () {
    console.log("editDraw change");
    if ($j("#editDraw_on").is(":checked")) {

        drawOnMap.showPolyLine();

    };

    if ($j("#editDraw_off").is(":checked")) {
        //console.log("OFF");
        drawOnMap.hidePolyLine();
    };

});

使用显示模块模式将代码包围在对象中。该对象是它自己的运行，仅用于测试地图实例和调用 drawPolyLine(latLng) 的单击事件是必需的。

Answer 1

您的问题是每次向多段线添加一个点时，都会创建一条新的多段线并丢失对旧多段线的引用。如果多段线已经存在，则扩展现有多段线的路径而不是创建新的多段线。

function drawPolyLine(latLng){
    if(!poly){
      path = new google.maps.MVCArray();
      console.log(latLng);
      path.push(latLng);

      poly = new google.maps.Polyline({
        path: path,
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        editable: true,
        map: map
      });
    } else {
      poly.getPath().push(latLng);
    }    
}

proof of concept fiddle

代码片段：

var drawOnMap = function() {

  var poly = null;
  var path;
  var encodedString;
  var decodedString;

  function drawPolyLine(latLng) {

    if (!poly) {
      path = new google.maps.MVCArray();
      console.log(latLng);
      path.push(latLng);

      poly = new google.maps.Polyline({
        path: path,
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        editable: true,
        map: map
      });
    } else {
      poly.getPath().push(latLng);
    }
  }

  function getPolyLineData() {
    var firstPoint = path.getAt(0);
    var lastPoint = path.getAt(path.length - 1);

    console.log(firstPoint);
    console.log(lastPoint);

    if ($j("#useWaypoints").is(":checked")) {
      var twaypoints = path.slice(1, path.length - 1);

      var waypoints = [];

      for (var i = 0; i < twaypoints.length; i++) {
        waypoints.push({
          location: new google.maps.LatLng(twaypoints[i].lat(), twaypoints[i].lng())
        });
      }
    } else {
      waypoints = null;
    }

    return data = {
      origin: {
        lat: firstPoint.lat(),
        lng: firstPoint.lng()
      },
      destination: {
        lat: lastPoint.lat(),
        lng: lastPoint.lng()
      },
      waypoints: waypoints
    };
  }

  function removePolyLine() {

    for (var i = path.length; i > 0; i--) {
      path.pop();
    }
  }

  function removeLastPoint() {
    if (path.length > 0) {
      path.pop();
      poly.setPath(path);
    }
  }

  function hidePolyLine() {
    console.log("HIDE");
    console.log(poly.getVisible());
    poly.getVisible() ? poly.setVisible(false) : poly.setVisible(true);
    poly.setMap(null);
  }

  function showPolyLine() {
    console.log("SHOW");
    poly.setVisible(true);
    poly.setMap(map);
  }


  return {
    drawPolyLine: drawPolyLine,
    getPolyLineData: getPolyLineData,
    removeLastPoint: removeLastPoint,
    removePolyLine: removePolyLine,
    showPolyLine: showPolyLine,
    hidePolyLine: hidePolyLine
  }
}();


var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  google.maps.event.addListener(map, 'click', function(evt) {
    drawOnMap.drawPolyLine(evt.latLng);
  })

  $("input[name='editDraw']").change(function() {
    console.log("editDraw change");
    if ($("#editDraw_on").is(":checked")) {

      drawOnMap.showPolyLine();

    };

    if ($("#editDraw_off").is(":checked")) {
      //console.log("OFF");
      drawOnMap.hidePolyLine();
    };

  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="editDraw" id="editDraw_on" type="radio" checked="checked" />
<input name="editDraw" id="editDraw_off" type="radio" />

<div id="map_canvas"></div>

无法从地图中隐藏折线

Not able to hide PolyLine from Map

javascript

google-maps

google-maps-api-3

polyline