将变量fillColor传递给Google Map

Question

我正在使用Python和Flask在Google地图上叠加多边形，多边形的边界和颜色作为变量传入。

我的代码绘制简单的方块。我可以将坐标作为变量传递

`var sq1 = [
new google.maps.LatLng({{ result [7] }}, {{ result [8] }}),
new google.maps.LatLng({{ result [7] }}, {{ result [10] }}),
new google.maps.LatLng({{ result [9] }}, {{ result [10] }}),
new google.maps.LatLng({{ result [9] }}, {{ result [8] }}),
new google.maps.LatLng({{ result [7] }}, {{ result [8] }}),
];
sq1 = new google.maps.Polygon({
paths: sq1,
strokeWeight: 2,
fillOpacity: 1,
fillColor: '#FFFFFF',
});

但如果我改变

    fillColor: '#FFFFFF',

到

    fillColor: {{ result [12] }},

它停止工作。结果[12]返回#FFFFFF，我也尝试改变它以返回'#FFFFFF'，但无济于事。

我哪里错了？

Answer 1

输出要用于JavaScript的值时，您需要确保转义数据属性。

fillColor: {{ result[12] }},

将输出

fillColor: #FFFFFF,

这不是有效的JavaScript。你希望它输出什么 - 你的第一个例子有它 - 是

fillColor: '#FFFFFF",

有两种方法可以实现这一目标。最简单的方法是

fillColor: '{{ result[12] }}',

另一种方法是更安全，因为它可以用于输出到JavaScript的所有变量。它足够聪明，可以在字符串周围加上引号并对数字进行处理。它还应该正确处理布尔值。

fillColor: {{ result[12]|tojson|safe }},

Flask documentation中提供了一个例子。