Question

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

我尝试过使用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],
});

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

动态更改Google地图上绘制的圆圈的颜色

1 个答案: