ExtJS 和谷歌地图答案

【问题标题】：ExtJS and Google MapsExtJS 和谷歌地图
【发布时间】：2011-09-06 00:21:11
【问题描述】：

我试图弄清楚 ExtJS 和 Google Maps 的搭配效果如何。我正在玩这个例子：http://dev.sencha.com/deploy/ext-4.0.0/examples/window/gmap.html

当我试图解决地图时，我迷路了。我希望能够以编程方式更改缩放级别、绘制多边形并在地图上放置点。

我一直在玩，所以我的代码和示例中的不一样。

我已经定义了一个表单面板并将地图嵌入其中。我有一个等待地图渲染的监听器：

listeners:{
            afterrender: {
                fn: setupWindow,
                scope: this
            }
        }

然后，在 setupWindow 里面我有这个：

gmap.setzoom(25);
mapBounds = new gmap.LatLngBounds(
                new gmap.LatLng(responseJson.minY, responseJson.minX),
                new gmap.LatLng(responseJson.maxY, responseJson.maxX)
                );

但它在那里失败了。我做错了什么？

【问题讨论】：

（只是添加评论，因为它并不是您问题的真正答案）。您是否尝试过 OpenLayers，它提供对 gmap v3 + 漂亮矢量图层的访问？
我有，但示例仅适用于 v2？
如何处理点击事件

标签： javascript extjs google-maps-api-3 extjs4

【解决方案1】：

由于您在有问题的行之前调用gmap.setZoom(25) - 我假设gmap 是GMap2 的一个实例，如下所示：

var gmap = new GMap2(...);

如果确实如此，那么new gmap.LatLngBounds 或new gmap.LatLng 应该会失败，因为map 的函数都不是（除非您在代码中添加它）。

你或许应该做的是：

mapBounds = new GLatLngBounds(
                    new GLatLng(responseJson.minY, responseJson.minX),
                    new GLatLng(responseJson.maxY, responseJson.maxX)
                );

编辑：澄清我的假设 - 从您尝试使用的 ExtJS 示例来看，您似乎正在尝试使用 API V2。

【讨论】：

也许我也不懂 GMap，但是这里的 ... 中是什么 new GMap2(...);？我试过这个： var gmap = ext.get("gmpanel")
我不太明白你的问题。你是在问我GMap2(...) 中的省略号是什么意思吗？在那种情况下 - 我不知道你是如何实例化你的 gmap 实例的。 Ext.get('gmappanel') 仅表示您在其他地方创建了它。可能在您的 ExtJS 应用程序中某个面板的initComponent 中。
我是个白痴。我明白你的意思了。感谢您的帮助。

【解决方案2】：

嗯...您正在尝试使用 Google Maps v3，而 ExtJS 示例是使用 GMap v2 构建的。

此外，就像 ZenMaster 指出的那样，您在尝试使用 GMap API 时遇到了一些麻烦。 gmap 变量从何而来？在 v3 中使用 new google.maps.LatLng，在 v2 中使用 new GLatLng。

【讨论】：

啊...我明白了。 LatLng 仅适用于 V3……确实是 V3。