Я пытаюсь передать некоторые значения из 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
}
Я получаю следующее сообщение об ошибке
Не могли бы вы сообщить мне, почему это происходит и как я могу это решить? Вот код, который у меня есть для 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>
Проблема в том, что вы определяете 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);
}
И он должен работать так, как ожидалось.