Проблема при передаче Dom val () и html () в параметры многоугольника при рисовании

0

Я пытаюсь передать некоторые значения из 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
   }

Я получаю следующее сообщение об ошибке

Изображение 174551

Не могли бы вы сообщить мне, почему это происходит и как я могу это решить? Вот код, который у меня есть для Drawing Manager:

<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>
Теги:
google-maps
google-maps-api-3

1 ответ

1
Лучший ответ

Проблема в том, что вы определяете polyColor (и все остальные переменные) локально внутри анонимной функции, которая выполняется, когда вы нажимаете на указанный div, и как только функция выполняется, эти переменные являются dicarded.

Это означает, что при создании объектов polygonOptions эти переменные не определены (они больше не существуют).

Чтобы решить эту проблему, определите эти переменные внутри функции document.ready:

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

});

Затем в событии click просто присваивайте значения этим переменным:

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

И он должен работать так, как ожидалось.

  • 0
    Привет, Матус! Спасибо за твой комментарий, на самом деле я сейчас могу нарисовать многоугольник, но он не использует стиль из настроек!
  • 0
    Попробуйте распечатать объект в консоли при создании, чтобы увидеть, имеет ли он указанные свойства.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню