Question

我使用以下代码将标记添加到地图中，而不是在Ext.map中显示标记

{
    xtype: 'map',
    id :'geomap', 
    width: '70%', 
    height: '100%', 
    layout: 'fit',
    useCurrentLocation: false, 
    flex: 3, 
    mapOptions: {
        zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl : false,
        navigationControl : false,
        streetViewControl : false,
        backgroundColor: 'transparent',
        disableDoubleClickZoom: true,
        draggable: true,
        keyboardShortcuts: false,
        scrollwheel: true,

    },
    initialize: function() {
        var gMap = this.getMap();

        // drop map marker
        var marker = new google.maps.Marker({
            map: gMap,
            animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng (12.82787,80.219722),
            title:"Hello World!"
        });
        var geo = Ext.create('Ext.util.Geolocation', {
            autoUpdate: true,
            listeners: {
                locationupdate: function (geo) {
                    var center = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
                    Ext.getCmp('geomap').update(center);
                    //To place the marker
                    var marker = new google.maps.Marker({
                        position: center,
                        map: Ext.getCmp('geomap').map
                    });
                    Ext.msg.alert('New latitude: ' + geo.getLatitude());
                },

                locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                    if (bTimeout) {
                        Ext.msg.alert('Timeout occurred.');
                    } else {
                        Ext.msg.alert('Error occurred.');
                    }
                }
            }
        });
        geo.updateLocation();
    }
}

没有显示标记。请帮忙。

Answer 1

initialize方法不适合使用地图，因为您无法确定它是否已在此处进行渲染。您需要将代码放在maprender事件处理程序中。

然后，为了轻松找到您的第一个标记，您应该首先将地图置于其中心（如此example）。

最后，您的Geolocation处理程序代码中存在一些小错误。请参阅我在代码中的评论。

这是您的代码的固定版本。对我来说，它适用于Touch 2.2.1的两种标记。我没有测试Geolocation部分，因为它在我的浏览器中不可用...

{
    xtype: 'map',
    id :'geomap',
    width: '70%',
    height: '100%',
    layout: 'fit',
    useCurrentLocation: false,
    flex: 3,
    mapOptions: {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl : false,
        navigationControl : false,
        streetViewControl : false,
        backgroundColor: 'transparent',
        disableDoubleClickZoom: true,
        draggable: true,
        keyboardShortcuts: false,
        scrollwheel: true

        // Center your map to see your first marker ;)
        ,center: new google.maps.LatLng (12.82787,80.219722)
    }
    ,listeners: {
        maprender: function() {
            // Get a ref to the google map object (should be provided
            // as an argument to the listener but apparently there is
            // a bug...)
            var gMap = this.getMap();

            new google.maps.Marker({
                map: gMap,
                animation: google.maps.Animation.DROP,
                position: new google.maps.LatLng (12.82787,80.219722),
                title:"Hello World!"
            });

            var geo = Ext.create('Ext.util.Geolocation', {
                autoUpdate: true,
                listeners: {
                    locationupdate: function (geo) {
                        var center = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
                        // This is deprecated
                        // Ext.getCmp('geomap').update(center);
                        Ext.getCmp('geomap').setMapCenter(center);
                        //To place the marker
                        var marker = new google.maps.Marker({
                            position: center,
                            // This won't work
                            // map: Ext.getCmp('geomap').map
                            //
                            // Use the ref we already have:
                            map: gMap
                            //
                            // Or you could get it this way:
                            // map: Ext.getCmp('geomap').getMap()
                        });
                        Ext.msg.alert('New latitude: ' + geo.getLatitude());
                    },

                    locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                        if (bTimeout) {
                            Ext.Msg.alert('Timeout occurred.');
                        } else {
                            Ext.Msg.alert('Error occurred.');
                        }
                    }
                }
            });
            geo.updateLocation();
        }
    }
}

在Sencha touch 2中未加载Ext.map标记

1 个答案: