javascript - 动态改变 Google map 上绘制的圆圈的颜色

Question

我一直在尝试使用 Flask 服务器上的数据来更改谷歌地图上圆圈的颜色。具体来说，我想以设定的时间间隔向服务器发送请求，并将响应设置为等于圆圈的填充颜色。

我尝试使用 Ajax，然后在内部编写 initMap 函数，并使用 setInterval 循环整个过程。但是，这没有帮助。这次我创建了一个事件来执行相同的操作，但是出现了未定义的错误。这是代码，

var time_changed = function(){
setInterval(time_changed, 5000)
}

var options = {
    center: {
        lat: 30.416497 ,
        lng: 77.967186
    },
    zoom: 10
 };

 var element = document.getElementById('map-canvas');

function initMap(){
    var map = new google.maps.Map(options, element);
      var circle  = new google.maps.Circle({
            map : map,
            center : new google.maps.LatLng(30.416497,77.967186),
            radius: 100,
            strokeColor : '#ffffff',
            fillColor: 'green',
            editable : true,
            draggable : true
        });

circle.addListener('time_changed', function(){
    var xhttp =  new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if(xhttp.readyState == 4 && xhttp.status == 200){
            circle.setOptions({
                fillColor : xhttp.responseText
            });
        }
    }
    xhttp.open('GET', 'http://127.0.0.1:5000/data', true);
    xhttp.send();
});

}

这是我今天早上尝试的最后一件事，但我收到了此错误。

TypeError: d is undefined                   common.js 174:49

Common.js 不是我创建的文件。

我真的无法解决这个问题。

为了更准确，这里是服务器脚本

from flask import Flask, render_template, Response

app = Flask(__name__)

@app.route('/')
def index():
    data = 1
    if data > 0:
        value = 100
    return render_template('index.html')

@app.route('/data')
def data_service():
    data = 'red'
    return Response(data, mimetype='text/plain')


if __name__ == '__main__':
    app.run(debug = True)

Answer 1

您可以尝试使用

[circleObject].setOptions({
  strokeColor: [new color],
  fillColor: [new color],
});

您需要使用圆形对象来更新颜色