Question

使用jQuery构建和更新Google Maps API自定义控件叠加层的内容，Google地图有时不会绘制更新的内容。

Main.overlay = $('<div><div style="background:white"><div id="overlay"></div></div></div>').detach();
Main.map.controls[google.maps.ControlPosition.TOP_LEFT].push(Main.overlay[0]);

...

$('#overlay').html('New content');

通过调整窗口大小来调整地图大小将导致显示新内容。将鼠标悬停在新内容上，光标会像新内容一样变化。我试过了

google.maps.event.trigger(Main.map, 'resize');

触发重绘，但由于地图实际上没有改变大小，我猜这是优化的。

如何告诉Google地图强制重绘？或者有什么关于jQuery .html（）函数可能导致这个？

在Mac OS X 10.9和iPhone模拟器上的Safari 7.0.2（9537.74.9）上会出现此问题，但在Firefox，Chrome或iOS 6 iPad 2上不会出现此问题。

检查DOM显示正在根据需要进行更改，它们只是没有显示。以下建议Force DOM redraw/refresh on Chrome/Mac添加

$('#overlay').hide().show(0);

解决看起来像Webkit的错误。

Answer 1

我尝试了很多方法使用API和jQuery重绘地图，但没有一个对我有用。通过使用'idle'事件，使用它有点像回调，我解决了由异步事件尚未完成引起的问题。

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something when all other changes to the map have completed
});

Answer 2

选择以这种方式包裹Google地图的div：

private String team;

    public void initData(String teamName) {
         this.team = teamName;

以后每次需要刷新时：

public void initialize(URL url, ResourceBundle rb) {

        try {
            Connection con = DBConnector.connect();
             ResultSet rs = con.createStatement().executeQuery("SELECT DISTINCT t1.title AS title, t2.title AS title2, g.score1, g.score2 FROM games g INNER JOIN teams AS t1 ON g.team1_id = t1.id INNER JOIN teams AS t2 ON g.team2_id = t2.id WHERE g.team1_id ="+team +"OR g.team2_id ="+team+"");
            while(rs.next()){
                reslist.add(new TeamResultsTable(rs.getString("title"), rs.getString("title2"), rs.getInt("score1"), rs.getInt("score2")));
            }

        } catch (SQLException ex) {
            Logger.getLogger(TableController.class.getName()).log(Level.SEVERE, null, ex);
        }

         title.setCellValueFactory(new PropertyValueFactory<TeamResultsTable, String>("title"));
        title2.setCellValueFactory(new PropertyValueFactory<TeamResultsTable, String>("title2"));
        score1.setCellValueFactory(new PropertyValueFactory<TeamResultsTable, Integer>("score1"));
        score2.setCellValueFactory(new PropertyValueFactory<TeamResultsTable, Integer>("score2"));

        gameTable.setItems(reslist);

如何在Google Maps API上强制重绘？

2 个答案: