使用标记来查找地图中的特定地址(Sencha Touch 2)Sencha Map

时间:2012-05-25 04:40:05

标签: sencha-touch extjs sencha-touch-2 sencha-touch-theming

我正在尝试构建一个应用,一旦用户点击地址就会给用户指示。 我的应用程序的结构是这样的:

我已经设法以列表形式编译我想要的所有地址,这意味着用户可以点击该地址,它将加载第二页。查看下图: This is my current App

上面的图片显示了我当前的应用程序和我当前的开发阶段,当应用程序加载它时显示页面A,当您点击任何地址时,它转到页面B. 我的应用程序的页面应该是带有标记的地图,该地图显示地图中地址的确切位置,并且如果可能的话,从用户当前位置给出确切地址的行车路线。查看下图: This is the exact thing i want What i want

第二张照片正是我想要达到的目的,这意味着一旦用户点击任何一个地址,地图就会显示标记指向地址的确切位置(纬度和经度),i需要与图片的外观完全一样。

我的代码如下: 在我的视图面板中,我有以下代码:

Ext.define('List.view.PresidentList', {
extend: 'Ext.List',
xtype: 'presidentlist',
requires: ['List.store.Presidents'],

config: {
     xtype:'container',
    title: 'Takaful Branch',
    //grouped: true,
    itemTpl: '{firstName} {lastName}',
    styleHtmlContent: true,
    store: 'Presidents',
    onItemDisclosure: true,


}

});

也在视图面板中我有:

Ext.define('List.view.PresidentDetail', {
extend: 'Ext.Panel',
xtype: 'presidentdetail',

config: {
    title: 'Details',
    styleHtmlContent: true,
    scrollable: 'vertical',
    tpl: [
        'Google Map Goes Here'
         ]
}

});

我的视图文件夹中的最后一个文件是:

Ext.define('List.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'mainpanel',
requires: [
    'List.view.PresidentList',
    'List.view.PresidentDetail'
],

config: {
    items: [
    {
        xtype: 'presidentlist'
    },
   ]
}

});

这是我的商店:

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: "PEJABAT WILAYAH SARAWAK", lastName: "Ground, 1st & 3rd Floor, Section 6, Kuching Town Land District (KTLD), Jalan Kulas, 93400 Kuching, Sarawak" },
        {   firstName: "PEJABAT WILAYAH TERENGGANU", lastName: "Lot PT 3593, Ground, Mezzanine & 1st Floor, Jalan Sultan Zainal Abidin, 20000 Kuala Terengganu, Terengganu" },
        {   firstName: "PEJABAT WILAYAH MELAKA", lastName: "No. 10, Jalan Melaka Raya 8, Taman Melaka Raya, 75000, Melaka. " },



    ]
}

});

这是我的模特:

Ext.define('List.model.President', {
extend: 'Ext.data.Model',
config: {
    fields: ['firstName', 'middleInitial', 'lastName']
},

fullName: function() {
    var d = this.data,
    names = [
        d.firstName,
        (!d.middleInitial ? "" : d.middleInitial + "."),
        d.lastName
    ];
    return names.join(" ");
}

});

最后我的控制器:

Ext.define('List.model.President', {
extend: 'Ext.data.Model',
config: {
    fields: ['firstName', 'middleInitial', 'lastName']
},

fullName: function() {
    var d = this.data,
    names = [
        d.firstName,
        (!d.middleInitial ? "" : d.middleInitial + "."),
        d.lastName
    ];
    return names.join(" ");
}

});

我在商店中拥有地址的确切坐标: 第一地址:纬度:4.600381经度:101.094174 第二地址:纬度:5.336649经度:103.142497 第三地址:纬度:2.184044经度:102.25982

我还在等待回复,而我仍然在研究自己的事情。我相信你的回复会帮助我并帮助那些有类似问题的其他人。感谢


我的商店:

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 : "PEJABAT WILAYAH SARAWAK",
        lastName : "Ground, 1st & 3rd Floor, Section 6, Kuching Town Land District (KTLD), Jalan Kulas, 93400 Kuching, Sarawak",
        latitude : 4.600381 ,
        longitude : 101.094174
    }, {
        firstName : "PEJABAT WILAYAH TERENGGANU",
        lastName : "Lot PT 3593, Ground, Mezzanine & 1st Floor, Jalan Sultan Zainal Abidin, 20000 Kuala Terengganu, Terengganu",
        latitude : 5.336649,
        longitude : 103.142497
    }, {
        firstName : "PEJABAT WILAYAH MELAKA",
        lastName : "No. 10, Jalan Melaka Raya 8, Taman Melaka Raya, 75000, Melaka. ",
        latitude : 2.184044,
        longitude : 102.25982
    }]
}

});

我的控制器:

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(component, map, geo, eOpts) {
                var position = new google.maps.LatLng(2.184044,102.25982);
                var marker = new google.maps.Marker({
                    position: position,
                    map: map
                        });

                var infowindow = new google.maps.InfoWindow({
                    content: 'Working Fine <br /> I have been working On you', 


                        });

            google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                        });

            setTimeout(function() {
                    map.panTo(position);
                }, 1000);

                },
           }, 
        })
     },
});

我的模特:

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 + ".")];
    return names.join(" ");
}
});

我的观点:

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
                 }
            },
 }


});

到目前为止,上面代码的结果与上面的图像类似,并且只能在列表中显示3个项目的一个纬度和经度。我现在的问题是让它以这样的方式工作:一旦用户点击列表中的任何项目,它将显示该特定地址的确切纬度和经度。请帮我看看我的应用程序(控制器)中的逻辑。谢谢

1 个答案:

答案 0 :(得分:1)

您可以自行查找路线,但他会放弃引脚(假设您在模型中添加了lat / long并将模型传递给视图):

Ext.define('List.view.PresidentDetail', {
    extend : 'Ext.Map',
    xtype : 'presidentdetail',
    config : {
        title : 'Details',
        styleHtmlContent : true,
        scrollable : 'vertical',
        president: null
    },
    onGeoUpdate : function(geo) {
        if (geo) {
            this.fireEvent('setcenter', this, this.getMap(), geo);
        }
    }
});

在你的控制器中:

Ext.define('List.controller.PresidentDetailController', {
    extend : 'Ext.app.Controller',
    config : {
        control : {
            'presidentdetail' : {
                activate : 'activateGPS',
                setcenter : 'dropPins'
            }
        },
        markersArray : [],
    },
    activateGPS : function(container, options){
        container.setUseCurrentLocation(true);
    },
    dropPins : function(component, map, geo, eOpts) {
        //only do this the first time? 
        //geo updates are constantly recieved so turn useCurrentLocation off
        comp.setUseCurrentLocation(true);

        //Remove all markers from the map.
        for(var i = 0; i < this.getMarkersArray().length; i++) {
            this.getMarkersArray()[i].setMap(null);
        }
        this.setMarkersArray(Array());

        var currentPosition = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
        var yourLocationMarker = new google.maps.Marker({
                position : currentPosition,
                title : 'Current Location',
                map : map
            });
        self.getMarkersArray().push(yourLocationMarker);

        var president = comp.getPresident();
        var presidentsPosition = new google.maps.LatLng(president.getLatitude(), president.getLongitude());
        var yourLocationMarker = new google.maps.Marker({
                position : presidentsPosition,
                title : president.fullName(),
                map : map
            });
        self.getMarkersArray().push(presidentsPosition);
    }
});

修改 以下是添加了纬度和经度字段的模型:

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(" ");
    }
});

带有附加字段的商店:

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 : "PEJABAT WILAYAH SARAWAK",
            lastName : "Ground, 1st & 3rd Floor, Section 6, Kuching Town Land District (KTLD), Jalan Kulas, 93400 Kuching, Sarawak",
            latitude : 4.600381 ,
            longitude : 101.094174
        }, {
            firstName : "PEJABAT WILAYAH TERENGGANU",
            lastName : "Lot PT 3593, Ground, Mezzanine & 1st Floor, Jalan Sultan Zainal Abidin, 20000 Kuala Terengganu, Terengganu",
            latitude : 5.336649,
            longitude : 103.142497
        }, {
            firstName : "PEJABAT WILAYAH MELAKA",
            lastName : "No. 10, Jalan Melaka Raya 8, Taman Melaka Raya, 75000, Melaka. ",
            latitude : 2.184044,
            longitude : 102.25982
        }]
    }
});