2011-01-27 2 views
0

Привет, как я могу удалить поле ввода «Изменение цвета», не разрушая все остальные элементы управления?Удалите поле ввода

Благодаря

Код ниже немного меня беспокоит в последних строках

function PolygonCreator(map) { 
    this.map = map; 
    this.pen = new Pen(this.map); 
    var thisOjb = this; 
    this.event = google.maps.event.addListener(thisOjb.map, 'click', function (event) { 
     thisOjb.pen.draw(event.latLng); 
    }); 
    this.showData = function() { 
     return this.pen.getData(); 
    } 
    this.showColor = function() { 
     return this.pen.getColor(); 
    } 
    this.destroy = function() { 
     this.pen.deleteMis(); 
     if (null != this.pen.polygon) { 
      this.pen.polygon.remove(); 
     } 
     google.maps.event.removeListener(this.event); 
    } 
} 

function Pen(map) { 
    this.map = map; 
    this.listOfDots = new Array(); 
    this.polyline = null; 
    this.polygon = null; 
    this.currentDot = null; 
    this.draw = function (latLng) { 
     if (null != this.polygon) { 
      alert('Click Reset to draw another'); 
     } else { 
      if (this.currentDot != null && this.listOfDots.length > 1 && this.currentDot == this.listOfDots[0]) { 
       this.drawPloygon(this.listOfDots); 
      } else { 
       if (null != this.polyline) { 
        this.polyline.remove(); 
       } 
       var dot = new Dot(latLng, this.map, this); 
       this.listOfDots.push(dot); 
       if (this.listOfDots.length > 1) { 
        this.polyline = new Line(this.listOfDots, this.map); 
       } 
      } 
     } 
    } 
    this.drawPloygon = function (listOfDots, color, des, id) { 
     this.polygon = new Polygon(listOfDots, this.map, this, color, des, id); 
     this.deleteMis(); 
    } 
    this.deleteMis = function() { 
     $.each(this.listOfDots, function (index, value) { 
      value.remove(); 
     }); 
     this.listOfDots.length = 0; 
     if (null != this.polyline) { 
      this.polyline.remove(); 
      this.polyline = null; 
     } 
    } 
    this.cancel = function() { 
     if (null != this.polygon) { 
      (this.polygon.remove()); 
     } 
     this.polygon = null; 
     this.deleteMis(); 
    } 
    this.setCurrentDot = function (dot) { 
     this.currentDot = dot; 
    } 
    this.getListOfDots = function() { 
     return this.listOfDots; 
    } 
    this.getData = function() { 
     if (this.polygon != null) { 
      var data = ""; 
      var paths = this.polygon.getPlots(); 
      paths.getAt(0).forEach(function (value, index) { 
       data += (value.toString()); 
      }); 
      return data; 
     } else { 
      return null; 
     } 
    } 
    this.getColor = function() { 
     if (this.polygon != null) { 
      var color = this.polygon.getColor(); 
      return color; 
     } else { 
      return null; 
     } 
    } 
} 

function Dot(latLng, map, pen) { 
    this.latLng = latLng; 
    this.parent = pen; 
    this.markerObj = new google.maps.Marker({ 
     position: this.latLng, 
     map: map 
    }); 
    this.addListener = function() { 
     var parent = this.parent; 
     var thisMarker = this.markerObj; 
     var thisDot = this; 
     google.maps.event.addListener(thisMarker, 'click', function() { 
      parent.setCurrentDot(thisDot); 
      parent.draw(thisMarker.getPosition()); 
     }); 
    } 
    this.addListener(); 
    this.getLatLng = function() { 
     return this.latLng; 
    } 
    this.getMarkerObj = function() { 
     return this.markerObj; 
    } 
    this.remove = function() { 
     this.markerObj.setMap(null); 
    } 
} 

function Line(listOfDots, map) { 
    this.listOfDots = listOfDots; 
    this.map = map; 
    this.coords = new Array(); 
    this.polylineObj = null; 
    if (this.listOfDots.length > 1) { 
     var thisObj = this; 
     $.each(this.listOfDots, function (index, value) { 
      thisObj.coords.push(value.getLatLng()); 
     }); 
     this.polylineObj = new google.maps.Polyline({ 
      path: this.coords, 
      strokeColor: "#3333FF", 
      strokeOpacity: 1.0, 
      strokeWeight: 2, 
      map: this.map 
     }); 
    } 
    this.remove = function() { 
     this.polylineObj.setMap(null); 
    } 
} 

function Polygon(listOfDots, map, pen, color) { 
    this.listOfDots = listOfDots; 
    this.map = map; 
    this.coords = new Array(); 
    this.parent = pen; 
    this.des = 'Hello'; 
    var thisObj = this; 
    $.each(this.listOfDots, function (index, value) { 
     thisObj.coords.push(value.getLatLng()); 
    }); 
    this.polygonObj = new google.maps.Polygon({ 
     paths: this.coords, 
     strokeColor: "#3333FF", 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: "#3333FF", 
     fillOpacity: 0.35, 
     map: this.map 
    }); 
    this.remove = function() { 
     this.info.remove(); 
     this.polygonObj.setMap(null); 
    } 
    this.getContent = function() { 
     return this.des; 
    } 
    this.getPolygonObj = function() { 
     return this.polygonObj; 
    } 
    this.getListOfDots = function() { 
     return this.listOfDots; 
    } 
    this.getPlots = function() { 
     return this.polygonObj.getPaths(); 
    } 
    this.getColor = function() { 
     return this.getPolygonObj().fillColor; 
    } 
    this.setColor = function (color) { 
     return this.getPolygonObj().setOptions({ 
      fillColor: color, 
      strokeColor: color, 
      strokeWeight: 2 
     }); 
    } 
    this.info = new Info(this, this.map); 
    this.addListener = function() { 
     var info = this.info; 
     var thisPolygon = this.polygonObj; 
     google.maps.event.addListener(thisPolygon, 'rightclick', function (event) { 
      info.show(event.latLng); 
     }); 
    } 
    this.addListener(); 
} 

function Info(polygon, map) { 
    this.parent = polygon; 
    this.map = map; 
    this.color = document.createElement('input'); 
    this.button = document.createElement('input'); 
    $(this.button).attr('type', 'button'); 
    $(this.button).val("Change Color"); 
    var thisOjb = this; 
    this.changeColor = function() { 
     thisOjb.parent.setColor($(thisOjb.color).val()); 
    } 
    this.getContent = function() { 
     var content = document.createElement('div'); 
     $(this.color).val(this.parent.getColor()); 
     $(this.button).click(function() { 
      thisObj.changeColor(); 
     }); 
     $(content).append(this.color); 
     $(content).append(this.button); 
     return content; 
    } 
    thisObj = this; 
    this.infoWidObj = new google.maps.InfoWindow({ 
     content: thisObj.getContent() 
    }); 
    this.show = function (latLng) { 
     this.infoWidObj.setPosition(latLng); 
     this.infoWidObj.open(this.map); 
    } 
    this.remove = function() { 
     this.infoWidObj.close(); 
    } 
} 
+0

Ahhhh, этот код отформатирован так ужасно, что нам больно! – jzd

+0

wow, мой экран почти взорвался – jAndy

+0

я знаю, извините, ребята – user393273

ответ

1

Оказывается, что button только когда-либо ссылки внутри этой последней функции , Info. Поэтому я бы сказал, что было бы безопасно прокомментировать 5 строк в пределах этой функции, которые относятся к ней (а также две дополнительные строки, которые являются частью обработчика кликов).

Если вы просто хотите, чтобы скрыть эту кнопку от пользователя, вы можете просто хотеть буквально .hide() после того, как вызывается Info. Это будет наименее навязчивым.

$('input[value="Change Color"]').hide(); 
0
function PolygonCreator(map) { 
    this.map = map; 
    this.pen = new Pen(this.map); 
    var thisOjb = this; 
    this.event = google.maps.event.addListener(thisOjb.map, 'click', function (event) { 
     thisOjb.pen.draw(event.latLng); 
    }); 
    this.showData = function() { 
     return this.pen.getData(); 
    } 
    this.showColor = function() { 
     return this.pen.getColor(); 
    } 
    this.destroy = function() { 
     this.pen.deleteMis(); 
     if (null != this.pen.polygon) { 
      this.pen.polygon.remove(); 
     } 
     google.maps.event.removeListener(this.event); 
    } 
} 

function Pen(map) { 
    this.map = map; 
    this.listOfDots = new Array(); 
    this.polyline = null; 
    this.polygon = null; 
    this.currentDot = null; 
    this.draw = function (latLng) { 
     if (null != this.polygon) { 
      alert('Click Reset to draw another'); 
     } else { 
      if (this.currentDot != null && this.listOfDots.length > 1 && this.currentDot == this.listOfDots[0]) { 
       this.drawPloygon(this.listOfDots); 
      } else { 
       if (null != this.polyline) { 
        this.polyline.remove(); 
       } 
       var dot = new Dot(latLng, this.map, this); 
       this.listOfDots.push(dot); 
       if (this.listOfDots.length > 1) { 
        this.polyline = new Line(this.listOfDots, this.map); 
       } 
      } 
     } 
    } 
    this.drawPloygon = function (listOfDots, color, des, id) { 
     this.polygon = new Polygon(listOfDots, this.map, this, color, des, id); 
     this.deleteMis(); 
    } 
    this.deleteMis = function() { 
     $.each(this.listOfDots, function (index, value) { 
      value.remove(); 
     }); 
     this.listOfDots.length = 0; 
     if (null != this.polyline) { 
      this.polyline.remove(); 
      this.polyline = null; 
     } 
    } 
    this.cancel = function() { 
     if (null != this.polygon) { 
      (this.polygon.remove()); 
     } 
     this.polygon = null; 
     this.deleteMis(); 
    } 
    this.setCurrentDot = function (dot) { 
     this.currentDot = dot; 
    } 
    this.getListOfDots = function() { 
     return this.listOfDots; 
    } 
    this.getData = function() { 
     if (this.polygon != null) { 
      var data = ""; 
      var paths = this.polygon.getPlots(); 
      paths.getAt(0).forEach(function (value, index) { 
       data += (value.toString()); 
      }); 
      return data; 
     } else { 
      return null; 
     } 
    } 
    this.getColor = function() { 
     if (this.polygon != null) { 
      var color = this.polygon.getColor(); 
      return color; 
     } else { 
      return null; 
     } 
    } 
} 

function Dot(latLng, map, pen) { 
    this.latLng = latLng; 
    this.parent = pen; 
    this.markerObj = new google.maps.Marker({ 
     position: this.latLng, 
     map: map 
    }); 
    this.addListener = function() { 
     var parent = this.parent; 
     var thisMarker = this.markerObj; 
     var thisDot = this; 
     google.maps.event.addListener(thisMarker, 'click', function() { 
      parent.setCurrentDot(thisDot); 
      parent.draw(thisMarker.getPosition()); 
     }); 
    } 
    this.addListener(); 
    this.getLatLng = function() { 
     return this.latLng; 
    } 
    this.getMarkerObj = function() { 
     return this.markerObj; 
    } 
    this.remove = function() { 
     this.markerObj.setMap(null); 
    } 
} 

function Line(listOfDots, map) { 
    this.listOfDots = listOfDots; 
    this.map = map; 
    this.coords = new Array(); 
    this.polylineObj = null; 
    if (this.listOfDots.length > 1) { 
     var thisObj = this; 
     $.each(this.listOfDots, function (index, value) { 
      thisObj.coords.push(value.getLatLng()); 
     }); 
     this.polylineObj = new google.maps.Polyline({ 
      path: this.coords, 
      strokeColor: "#3333FF", 
      strokeOpacity: 1.0, 
      strokeWeight: 2, 
      map: this.map 
     }); 
    } 
    this.remove = function() { 
     this.polylineObj.setMap(null); 
    } 
} 

function Polygon(listOfDots, map, pen, color) { 
    this.listOfDots = listOfDots; 
    this.map = map; 
    this.coords = new Array(); 
    this.parent = pen; 
    this.des = 'Hello'; 
    var thisObj = this; 
    $.each(this.listOfDots, function (index, value) { 
     thisObj.coords.push(value.getLatLng()); 
    }); 
    this.polygonObj = new google.maps.Polygon({ 
     paths: this.coords, 
     strokeColor: "#3333FF", 
     strokeOpacity: 0.8, 
     strokeWeight: 2, 
     fillColor: "#3333FF", 
     fillOpacity: 0.35, 
     map: this.map 
    }); 
    this.remove = function() { 
     this.info.remove(); 
     this.polygonObj.setMap(null); 
    } 
    this.getContent = function() { 
     return this.des; 
    } 
    this.getPolygonObj = function() { 
     return this.polygonObj; 
    } 
    this.getListOfDots = function() { 
     return this.listOfDots; 
    } 
    this.getPlots = function() { 
     return this.polygonObj.getPaths(); 
    } 
    this.getColor = function() { 
     return this.getPolygonObj().fillColor; 
    } 
    this.setColor = function (color) { 
     return this.getPolygonObj().setOptions({ 
      fillColor: color, 
      strokeColor: color, 
      strokeWeight: 2 
     }); 
    } 
    this.info = new Info(this, this.map); 
    this.addListener = function() { 
     var info = this.info; 
     var thisPolygon = this.polygonObj; 
     //google.maps.event.addListener(thisPolygon, 'rightclick', function (event) { 
      // info.show(event.latLng); 
     //}); 
    } 
    this.addListener(); 
} 

function Info(polygon, map) { 
    this.parent = polygon; 
    this.map = map; 
    this.color = document.createElement('input'); 
    this.button = document.createElement('input'); 
    $(this.button).attr('type', 'button'); 
    $(this.button).val("Change Color"); 
    var thisOjb = this; 
    this.changeColor = function() { 
     thisOjb.parent.setColor($(thisOjb.color).val()); 
    } 
    this.getContent = function() { 
     var content = document.createElement('div'); 
     $(this.color).val(this.parent.getColor()); 
     //$(this.button).click(function() { 
      // thisObj.changeColor(); 
     // }); 
     $(content).append(this.color); 
     $(content).append(this.button); 
     return content; 
    } 
    thisObj = this; 
    this.infoWidObj = new google.maps.InfoWindow({ 
     content: thisObj.getContent() 
    }); 
    this.show = function (latLng) { 
     this.infoWidObj.setPosition(latLng); 
     this.infoWidObj.open(this.map); 
    } 
    this.remove = function() { 
     this.infoWidObj.close(); 
    } 
} 

Неподвижные

+0

Это только отформатированный код? Это не должно быть ответом на ваш вопрос. Патрик исправил ваш вопрос для вас, поэтому просто удалите этот ответ. – jzd