Question

我有一个PolyLine，我点击地图绘制。这很好，但由于某种原因我无法从地图中隐藏它。删除和其他一切正常。我尝试了几乎所有从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
}
}();

有人可以告诉我，为什么这不起作用。根据谷歌地图API我是对的。我也发现了几个关于这个主题的SO问题，但没有任何对我有用。

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

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

polyline-hide

MAPS API v3

Toogle Visablity

编辑：我通过单选按钮调用隐藏/显示功能

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

});

使用显示模块模式将代码包围在Object中。对象正在为它自己运行，仅用于测试一个map实例，并且需要一个click事件来调用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>

无法从地图隐藏PolyLine

1 个答案: