GWT 谷歌地图 V3 叠加小部件
GWT Google Maps V3 overlay widgets
我正在使用GWT google maps V3 API,我需要在地图上显示自定义形状。对于简单的元素,我使用了Polygon,Circle和InfoWidnow类,但我想显示一些其他小部件,如按钮或自定义面板。有没有办法使用覆盖视图类来做到这一点?我尝试了一个简单的解决方案:一个包含MapWidget和我的自定义小部件的AbsolutePanel,放在顶部,但我想尽可能多地使用gwt google地图类。我已经阅读了文档并搜索了答案,但我无法弄清楚,所以代码示例会很棒。谢谢!
只需使用标准 GWT API 以及您的地图 V3 API。它们将足够好地互连。
我在这里找到了我需要的东西(javascript v3 api):https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays
方法名称和类非常相似,因此弄清楚应该如何使用GWT类并不难(如OverlayView)。
下面是在地图上渲染自定义微件(包含 SVG 元素和动画)的示例:
private class TargettingOverlay extends OverlayView {
protected Element div ;
protected PanelWrapper panelWrapper;
private TargettingEffect targetEffect;
TargettingOverlay(){
targetEffect = new TargettingEffect();
targetEffect.setLinedDimension(10500);
targetEffect.setLinesOffset(-5000);
}
void positionTarget(LatLng loc, boolean withoutLines){
if (targetEffect == null )
return;
if (loc == null) {
targetEffect.setElementsVisible(false);
return;
}
targetEffect.setElementsVisible(true);
Point p = null;
Point sw = null;
Point ne = null;
LatLng locSW = (LatLng)this.getMap().getBounds().getSouthWest();
LatLng locNE = (LatLng)this.getMap().getBounds().getNorthEast();
//
p = (Point)getProjection().fromLatLngToDivPixel(loc);
sw = (Point)getProjection().fromLatLngToDivPixel(locSW);
ne = (Point)getProjection().fromLatLngToDivPixel(locNE);
targetEffect.setWithoutLinles(withoutLines);
targetEffect.target((int)ne.getY(), (int)p.getY(), (int)sw.getX(), (int)p.getX());
}
@Override
public void draw() {
Point ne = (Point)getProjection().fromLatLngToDivPixel((LatLng)
this.getMap().getBounds().getNorthEast());
Point sw = (Point)getProjection().fromLatLngToDivPixel((LatLng)
this.getMap().getBounds().getSouthWest());
div.getStyle().setTop(ne.getY(), Unit.PX);
div.getStyle().setLeft(sw.getX(), Unit.PX);
}
@Override
public void onAdd() {
div = DOM.createDiv();
getPanes().getOverlayLayer().appendChild(div);
panelWrapper = new PanelWrapper(div);
panelWrapper.attach();
targetEffect.setContainer(panelWrapper);
}
@Override
public void onRemove() {
div.removeFromParent();
panelWrapper.removeFromParent();
div = null;
panelWrapper = null;
}
}
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- Dojo不解析自定义小部件的模板html中的小部件声明性
- 在输入字段中将最小金额设置为
- 砌体不能填补小缺口
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 限制javascript变量的最小/最大整数
- HTML5在画布中加载较小的图像并保存实际大小的图像
- 最小化时暂停Javascript动画
- 如何正确实现Jquery多选小部件
- 微笑时间轴小部件添加自定义字段
- 如何在Symfony2中的表单小部件中包含javascript
- 如何将JSON数据源适合Jquery自动完成小部件
- 如果使用javascript函数屏幕太小,我该如何更改HTML文件的背景色
- 通过jquery设置最小高度
- 收听ckeditor小部件事件
- CKEditor如何允许href="javascript:void(0)"在小部件中
- 有没有一种方法可以获得three.js的最小/lite版本
- jQuery是否提供带有背景淡入淡出小部件的叠加层
- 单击小图像并叠加大图像
- GWT 谷歌地图 V3 叠加小部件