Question

现在我有了我的商店：stuStore设置，其中包含一些模拟数据。我有另一个页面是谷歌地图。

学生数据结构： {姓名，地理位置，价值等......}

我想根据他们在stuStore内的位置显示每个学生信息到谷歌地图上。

顺便说一句，这是代码：

Ext.define('myapp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    fullscreen: true,
    requires: [
        'Ext.TitleBar',
        'Ext.Video',
        'Ext.Map',
        'Ext.Panel',
        'Ext.tab.*',
        'Ext.*'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'myapp',
                iconCls:'maps',
                xtype: 'map',
                useCurrentLocation: true,
                store: 'myapp.store.stuStore'
            }

我该怎么做？

提前致谢。

更新1：

var mapdemo = Ext.create('Ext.Map', {
    mapOptions: {
        center: new google.maps.LatLng(-37.73228, 144.86900),  //nearby San Fran
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.DEFAULT
        }
    },
    title: 'MyApp',
    iconCls: 'maps',
    fullscreen: true,
    xtype: 'map',
    id: 'mainMap',
    useCurrentLocation: false,
    listeners: {
        maprender: function (comp, googleMap) {
            var store, latlng, marker;
            store = Ext.getStore('myapp.store.stuStore');

            store.each(function (record, index, length) {
                latlng = new google.maps.LatLng(record.get('Lat'), record.get('Lng'));

                marker = new google.maps.Marker({
                    position: latlng,
                    map: this
                });
            });     
        }

    }
}),
    infowindow = new google.maps.InfoWindow({
        content: 'Sencha HQ'
    });


Ext.define('myapp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    fullscreen: true,
    config: {
        tabBarPosition: 'bottom',
        items: [mapdemo],
    }
});

这是我在view \ Main.js

中的更新代码

但我没有得到任何标记，并且它一直在抛出错误：

未捕获的TypeError：无法调用未定义的每个方法

顺便说一下，停靠在屏幕底部的工具栏上的图标也消失了。

请指出正确的方向，谢谢~~~

Answer 1

您可以通过在maprender事件回调中循环遍历商店记录来创建标记，如下所示：

Ext.define('myapp.controller.MapController', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            mapComponent: 'main map'
        },
        control: {
            mapComponent: {
                maprender: 'onMaprender',
            }
        }
    },
    onMaprender: function(mapComponent, googleMap) {
        var store, latLng, marker;

        // Get store
        store = Ext.getStore('myapp.store.stuStore')

        // On each store record
        store.each(function(record, index, length) {

            // Get position
            latLng = new google.maps.LatLng(record.get('lat'), record.get('lng'));

            // Create marker
            marker = new google.maps.Marker({
                position: latLng,
                map: googleMap
            });
        });
    }
});

看看我放在一起的this Sencha Fiddle。

如何从SenCha Touch中的商店检索数据

1 个答案: