Sencha触摸 - 无法谷歌地图标记

时间:2012-01-05 00:02:16

标签: google-maps extjs sencha-touch

我正在学习sencha触摸并尝试在谷歌地图上放置标记。我在线查看了大多数示例,但我无法使标记和infoWindow工作。以下是我的代码:

myApp.views.MapCard = Ext.extend(Ext.Panel, {
    id: "mapcard",
    layout: 'card',
    initComponent: function() {
        this.map = new Ext.Map({
            useCurrentLocation: true,
            mapOptions: {
                zoom: 12,
            },
        });

        this.panel = new Ext.Panel({
            layout: 'fit',
            items: this.map,
        });

        this.items = this.panel;

        myApp.views.MapCard.superclass.initComponent.call(this);

        refresh = function(theMap) {
            var geoTag = {
                lat: '47.584863',
                longi: '-122.147026',
                text: 'Hello World',
            }
            addMarker(geoTag, theMap);
        }

        addMarker = function(geoTag, theMap) {
            var latLng = new google.maps.LatLng(geoTag.lat, geoTag.longi);
            var marker = new google.maps.Marker({
                map: theMap.map,
                position: latLng
            });

            google.maps.event.addListener(marker, "click", function() {
                geoTagBubble.setContent(tweet.text);
                geoTagBubble.open(theMap.map, marker);
            });
        };

        geoTagBubble = new google.maps.InfoWindow();

        refresh(this.map);
    },

});

Ext.reg('mapcard', myApp.views.MapCard);

我也无法获取用户的当前位置,我很确定在initComponent期间未加载地图。我将调用json服务来拉取lat / lon并稍后循环。如果有更好的实施,请告诉我!

非常感谢!

1 个答案:

答案 0 :(得分:3)

这是一个非常简单的示例应用程序,用于演示: http://septa.mobi

您可以在view-source下或GitHub上找到源代码: https://github.com/mjumbewu/Septnuts/

这是将标记添加到地图的面板: https://github.com/mjumbewu/Septnuts/blob/master/src/Septnuts/MapPanel.js

警告:Sencha Touch 1.x中有bug阻止嵌入式Google地图接收任何点击事件

您需要在包含sencha-touch.js之后包含此修补程序,以便地图上的任何点击侦听器都能正常工作: https://github.com/mjumbewu/Septnuts/blob/master/src/sencha-maptouch-patch.js