Sencha touch 使用标记器在地图中定位特定地址（Sencha Touch 2）Sencha地图

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

我已经设法以列表形式编译了我想要的所有地址，这意味着用户可以点击地址，它将加载第二页。查看以下图片：

上面的图片显示了我当前的应用程序和我当前的开发阶段，当应用程序加载时，它会显示页面A，当你点击任何地址时，它会进入页面B。 我的应用程序的页面应该是一张地图，上面有一个标记，显示地址在地图中的确切位置，如果可能的话，还可以从用户当前位置给出确切地址的行驶方向。查看以下图片：

第二张图片正是我想要实现的，这意味着一旦用户点击任何一个地址，就会出现一张地图，上面的标记指向地址的确切位置（纬度和经度），我需要的正是图片的外观

我的代码如下： 在“我的视图”面板中，我有以下代码：

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.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.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个项目的一个纬度和经度。我现在的问题是让它以这样一种方式工作：一旦用户点击列表中的任何项目，它就会显示该特定地址的确切纬度和经度。请帮助我查看我的应用程序（控制器）中的逻辑。谢谢

您可以自行确定方向，但他正在放下插针（假设您将lat/long添加到模型中，并在创建模型时将模型传递到视图）：

在控制器中：

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

---

您可以自行确定方向，但他正在删除引脚（假设您向模型中添加了lat/long，并在创建模型时将模型传递给视图）：

在控制器中：

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

---

你好，超人，我已经设法让我的地图显示与一个标记指向确切的位置，谢谢你给我的建议。现在我还有一个问题，我希望列表中的每个项目根据纬度和经度都有自己独特的位置。到目前为止，我的代码是这样的：嗨，超人，我已经设法让地图上的标记指向确切的位置，谢谢你给我的建议。现在我还有一个问题，我希望列表中的每个项目都根据纬度和经度有自己的唯一位置。到目前为止，我的代码如下所示：