煎茶触摸 2 地图对列表中的每个项目使用不同的纬度和经度 (Sencah)

Sencha Touch 2 Map using different Latitude and Longitude for each item in List (Sencah)

本文关键字:纬度 Sencah 经度 地图 触摸 列表 项目      更新时间:2023-09-26

我正在构建一个包含地址列表的应用程序。此应用程序的工作方式是,一旦用户单击列表中的每个项目(地址),下一页将显示地图,并且地图具有指向单击地址的确切位置的标记。这是由于代码中规定的纬度和经度坐标而实现的。我的问题是我有多个地址,每个地址都有唯一的经度和纬度。我想让我的应用程序以这样的方式工作:当用户单击他们感兴趣的任何地址时,应用程序将打开一个页面并显示地图和指向地图上地址确切位置的标记。我的代码如下:它运行良好,但是当用户单击地址时,它会将他们带到相同的逻辑和纬度。

我的商店:

Ext.define('List.store.Presidents', {
extend : 'Ext.data.Store',
config : {
    model : 'List.model.President',
    sorters : 'lastName',
    grouper : function(record) {
        return record.get('lastName')[0];
    },
    data : [{
        firstName : "Ikhlas HQ",
        lastName : "Tower 11A, Avenue 5, Bangsar South, No.8 Jalan Kerinchi 59200 Kuala Lumpur",
        latitude : 3.110649,
        longitude : 101.664991,
        id: 'm12',
    },
    {
        firstName : "PEJABAT WILAYAH SELANGOR",
        lastName : "No. 97, 97-1 & 97-2, Jalan Mahogani 5/KS7, Ambang Botanic, 41200 Klang,   Selangor",
        latitude : 3.003384,
        longitude : 101.45256,
        id: 'm1',
    }, ]
}
});

我的控制器:

Ext.define('List.controller.Main', {
extend: 'Ext.app.Controller',
config: {
    control: {
        'presidentlist': {
            disclose: 'showDetail'
        },
     }
 },
showDetail: function(list, record) {
            this.getMain().push({
                xtype: 'presidentdetail',
                title: record.fullName(),
listeners: {
            maprender: function(comp, map) {
                var position = new google.maps.LatLng(5.978132,116.072617);
                var marker = new google.maps.Marker({
                    position: position,
                    map: map
                        });
            google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                        });
            setTimeout(function() {
                    map.panTo(position);
                }, 1000);
                },
           }, 
        })
     },
});

我的观点:

Ext.define('List.view.PresidentDetail', {
extend : 'Ext.Map',
xtype: 'presidentdetail',
    config: {
                title: 'Details',
                styleHtmlContent: true,
                scrollable: 'vertical',
                //useCurrentLocation: true,
                layout: 'fit',
    mapOptions: {
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                navigationControl: true,
                navigationControlOptions: {
                style: google.maps.NavigationControlStyle.DEFAULT
                 }
            },
    }

});

我的模型:

Ext.define('List.model.President', {
extend : 'Ext.data.Model',
config : {
    fields : ['firstName', 'middleInitial', 'lastName', 'latitude', 'longitude']
},
fullName : function() {
    var d = this.data, names = [d.firstName, (!d.middleInitial ? "" : d.middleInitial + "."), d.lastName];
    return names.join(" ");
}
});

请帮帮我。我需要用纬度和经度标记列表中的每个地址,以便当用户单击地址时,它将指向地图的确切位置。

你的行:

var position = new google.maps.LatLng(5.978132,116.072617);

固定到相同的坐标,因此永远不会改变。

在我的应用程序中,我让视图向控制器触发一个事件,然后在控制器中引用记录的坐标,然后将其设置为地图。

在视图:

 config: {
        layout: 'fit',
        items: [
            {
                xtype: 'map',
                listeners: {
                    maprender: function (extMapComponent, googleMapComp) {
                        this.fireEvent('googleMapRender', googleMapComp);
                    }
                 }
             }
        ]
 }

控制器:

 refs: {
           mapRef: 'map'
   },
   Control: {            
            mapRef: {
                googleMapRender: 'onGoogleMapRender'
            }
   }
 onGoogleMapRender: function (googleMap) {
        // this.selectedRecord should be set when you select the item in the list 
        // so that you can pull the coordinates off
        var record = this.selectedRecord;
        var long = record.get("Longitude");
        var lat = record.get("Latitude");
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, long);
        });
        marker.setMap(googleMap);
 }