Question

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

我已经设法以列表形式编译我想要的所有地址，这意味着用户可以点击该地址，它将加载第二页。查看下图： 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个项目的一个纬度和经度。我现在的问题是让它以这样的方式工作：一旦用户点击列表中的任何项目，它将显示该特定地址的确切纬度和经度。请帮我看看我的应用程序（控制器）中的逻辑。谢谢

Answer 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 }] } });

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

1 个答案: