Question

我试图从Dom .val()和.html()传递一些值，如下所示：

$("#drawPolygon").on("click",function(){
    var polyName = $("#polyDatasetName").val();
    var polyColor = $("#polyFillColor").val();
    var polyTranc = ($("#polyTrancparency").html()).slice(2);
    var polyBorderColor = $("#polyBorderColor").val();
    var polyBorderSize = $("#polyBorderSize").html();
    var polyBorderTranc = ($("#polyBorderTransparency").html()).slice(2);
 });

我试图提醒所有完全正确的结果，但是当我将它们作为PolygonOptions选项传递时：

 polygonOptions: {
          fillColor: polyColor,
          fillOpacity: (polyFillColor/100),
          strokeColor: polyBorderColor,
          strokeWeight:polyBorderSize,
          clickable: false,
          editable: true,
          zIndex: 1
   }

我收到以下错误消息

enter image description here

能告诉我为什么会这样，以及如何解决这个问题？这是我为绘图管理器提供的代码：

<script>
var map;
var drawingManager
$(document).ready(function () {
    var latlng = new google.maps.LatLng(49.241943, -122.889318);
    var myOptions = {
        zoom: 12,
        center: latlng,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    $("#drawPolygon").on("click",function(){
        var polyName = $("#polyDatasetName").val();
        var polyColor = $("#polyFillColor").val();
        var polyTranc = ($("#polyTrancparency").html()).slice(2);
        var polyBorderColor = $("#polyBorderColor").val();
        var polyBorderSize = $("#polyBorderSize").html();
        var polyBorderTranc = ($("#polyBorderTransparency").html()).slice(2);
     });

    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
            google.maps.drawing.OverlayType.MARKER,
            google.maps.drawing.OverlayType.CIRCLE,
            google.maps.drawing.OverlayType.POLYGON,
            google.maps.drawing.OverlayType.POLYLINE,
            google.maps.drawing.OverlayType.RECTANGLE]
        },

     polygonOptions: {
      fillColor: polyColor,
      fillOpacity: (polyFillColor/100),
      strokeColor: polyBorderColor,
      strokeWeight:polyBorderSize,
      clickable: false,
      editable: true,
      zIndex: 1
    }
 });
 </script>

Answer 1

问题是你在匿名函数中本地定义polyColor（以及所有其他变量），当你单击指定的div时执行该函数，并且一旦执行该函数，就会对这些变量进行处理。

这意味着当您创建对象polygonOptions时，这些变量未定义（它们不再存在）。

要解决此问题，请在document.ready function：

中定义这些变量

$(document).ready(function() {
    var polyName;
    var polyColor;
    var polyTranc;
    var polyBorderColor;
    var polyBorderSize;
    var polyBorderTranc;
    ...

});

然后在点击事件上，只需为这些变量赋值：

$("#drawPolygon").on("click",function() {
    polyName = $("#polyDatasetName").val();
    polyColor = $("#polyFillColor").val();
    polyTranc = ($("#polyTrancparency").html()).slice(2);
    polyBorderColor = $("#polyBorderColor").val();
    polyBorderSize = $("#polyBorderSize").html();
    polyBorderTranc = ($("#polyBorderTransparency").html()).slice(2);
}

它应该按预期工作。

将Dom val（）和html（）传递给Drawing中的Polygon选项的问题

1 个答案: