刷新GoogleMaps tile服务器可以使用JavaScript，但不能使用GWT
Refreshing GoogleMaps tile server works in JavaScript but not in GWT
我正在GWT应用程序中显示天气图。我使用的是GWT2.7和GoogleMapsJavaScriptneneneba API的GWT包装器（GWT-maps-3.8.0-pre1.zip）
我使用tile服务器获取天气信息，每5分钟更新一次。在5分钟的时候，我通过将缩放设置为1，然后返回到原始，通过触发调整大小，以及通过移除然后再次添加天气层来刷新地图。
效果很好然而，最近我注意到这已经不起作用了：刷新甚至从未进入tile服务器，因此不会显示新的天气。如果你把我的地图放12个小时，你就会看到12个小时前的天气。以前，地图会自动保持更新。我没有更改任何代码所以我的猜测是，底层的GoogleMaps JavaScript API发生了一些变化
然而，我创建了一个简单的纯JavaScript示例：
<!DOCTYPE html>
<html>
<head>
<title>Map Test</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map {
width:90%;
height: 90%;
display:inline-block;
}
</style>
</head>
<body>
<div id="map"></div>
<button type="button" onClick="refreshMap()">Refresh</button>
<script type="text/javascript">
var map;
var tileNEX;
function initMap() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(42.5, -95.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
tileNEX = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD',
isPng: true
});
map.overlayMapTypes.setAt("0",tileNEX);
}
function refreshMap(){
var zoom = map.getZoom();
map.setZoom(1);
map.setZoom(zoom);
//google.maps.event.trigger(map, 'resize');
//var layer = map.overlayMapTypes.getAt(0);
//map.overlayMapTypes.setAt(0, null);
//map.overlayMapTypes.setAt(0, layer);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
令我惊讶的是，这仍然很好。每当单击"刷新"按钮时，地图都会转到互动程序服务器并获取新的互动程序。
所以我尝试在GWT中做完全相同的事情：
package com.example.client;
import com.google.gwt.ajaxloader.client.AjaxLoader;
import com.google.gwt.ajaxloader.client.AjaxLoader.AjaxLoaderOptions;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapType;
import com.google.maps.gwt.client.MapTypeId;
public class GwtMapTest implements EntryPoint {
@Override
public void onModuleLoad() {
AjaxLoaderOptions options = AjaxLoaderOptions.newInstance();
options.setOtherParms("sensor=false");
Runnable callback = new Runnable() {
public void run() {
createMap();
}
};
AjaxLoader.loadApi("maps", "3", callback, options);
}
public void createMap() {
MapOptions mapOpts = MapOptions.create();
mapOpts.setZoom(4);
mapOpts.setCenter(LatLng.create(37.09024, -95.712891));
mapOpts.setMapTypeId(MapTypeId.TERRAIN);
mapOpts.setStreetViewControl(false);
final GoogleMap map = GoogleMap.create(Document.get().getElementById("map_canvas"), mapOpts);
addWeatherLayer(map);
Button button = new Button("Gwt Refresh");
button.addClickHandler(new ClickHandler(){
@Override
public void onClick(ClickEvent event) {
refreshWeatherLayer(map);
}
});
Button nativeButton = new Button("Native Refresh");
nativeButton.addClickHandler(new ClickHandler(){
@Override
public void onClick(ClickEvent event) {
nativeRefreshWeatherLayer(map);
}
});
RootPanel.get().add(button);
RootPanel.get().add(nativeButton);
}
public native void addWeatherLayer(GoogleMap map) /*-{
var imageMapType = new $wnd.google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/"+ zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new $wnd.google.maps.Size(256, 256),
opacity:.50,
isPng: true
});
map.overlayMapTypes.setAt("0", imageMapType);
}-*/;
private void refreshWeatherLayer(GoogleMap map){
double zoom = map.getZoom();
map.setZoom(1);
map.setZoom(zoom);
MapType layer = map.getOverlayMapTypes().getAt(0);
map.getOverlayMapTypes().setAt(0, null);
map.getOverlayMapTypes().setAt(0, layer);
}
private native void nativeRefreshWeatherLayer(GoogleMap map) /*-{
var zoom = map.getZoom();
map.setZoom(1);
map.setZoom(zoom);
$wnd.google.maps.event.trigger(map, 'resize');
var layer = map.overlayMapTypes.getAt(0);
map.overlayMapTypes.setAt(0, null);
map.overlayMapTypes.setAt(0, layer);
}-*/;
}
这应该做与纯JavaScript示例相同的事情。相反，当我单击按钮时，地图确实会刷新（我看到天气层闪烁），但它实际上不会进入新瓦片的瓦片服务器。
更奇怪的是，这种"排序"在Internet Explorer中有效：也许我点击按钮三次中就有一次，地图实际上会到达tile服务器。但在Chrome中，当我点击按钮时，它永远不会进入互动程序服务器。
为了确定这一点，我正在查看浏览器工具的网络选项卡我希望每次单击按钮时地图都会进入互动程序服务器这就是它在纯JavaScript中所做的，也是它在GWT中曾经做的，但在过去几个月的某个时候，GWT的行为发生了变化。
我不认为这是浏览器缓存问题问题是而不是地图试图获取新瓦片，而是它从未尝试获取新瓦片。我单击按钮，在开发人员工具的网络选项卡中看不到任何事情。
- 为什么我在JavaScript和GWT中看到不同的行为
- 为什么我在不同的浏览器中看到不同的行为
- GWT GoogleMaps库是否正在进行某种内部缓存？有没有办法禁用它
- 为什么这种行为明显发生了变化
- 如何通过转到tile服务器获取新tile来刷新GWT映射
这不是最终答案。但包含重要信息。
为了管理http调用，GWT有一组类似浏览器的类，我认为这就是问题所在
如果以前使用的代码相同，则磁贴服务器最近可能包含缓存标头（缓存控制：最大年龄＝300）。由于某些原因，GWT代码没有正确地管理这个头。
如果我是对的，解决这个问题的一种方法是在GWT调用中附加一个带有当前时间的参数（就像代码的浏览器版本一样）。
public native void addWeatherLayer(GoogleMap map) /*-{
var imageMapType = new $wnd.google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/"+ zoom + "/" + coord.x + "/" + coord.y + ".png?" + new Date().getTime();
},
tileSize: new $wnd.google.maps.Size(256, 256),
opacity:.50,
isPng: true
});
map.overlayMapTypes.setAt("0", imageMapType);
}-*/;
相关文章：
- JS可以在Chrome中工作，但不能在Firefox中工作
- WebRTC视频聊天可以在FF中使用，但不能在Chrome中使用
- jQuery Datepicker可以在Safari中工作，但不能在FF或Chrome中工作
- 三角库可以与firefox一起使用，但不能在Chrome中使用
- Highcharts可以从服务器加载数据，但不能更新
- 刷新GoogleMaps tile服务器可以使用JavaScript，但不能使用GWT
- node.js可以识别字符模式，但不能识别数字模式
- 如何在元素中处理鼠标事件，但不能在其子元素上处理
- Json到CSV下载，可以在chrome中工作，但不能在IE浏览器中工作
- jQuery$.post可以在chrome、safari中工作，但不能在FF中工作(声明成功回调函数未定义）
- Javascript可以在chrome中使用，但不能在其他浏览器中使用
- Iframe加载调整大小在Chrome中工作，但不能在IE或Firefox中工作
- Rails Production-可以工作，但不能编辑/删除/创建记录
- 能够在Highcharts中看到值，但不能看到图形
- Django，HTML，JS:<img src=“#">可以在HTML中工作，但不能在JS文件中工作
- 通过Javascript SDK登录Facebook可以在移动设备和本地主机上使用，但不能在台式机上使用
- jQuery/Javascript函数可以在Chrome中使用，但不能在IE11中使用
- 可以将模型传播到组件，但不能传播到sap.ui.jsfragment
- 能够获取元素长度，但不能获取内部 HTML
- 两个独立工作的javascript函数，但不能一起工作
