使用标记来查找地图中的特定地址（Sencha Touch 2）Sencha Map [英] Using Marker to Spot a particular address in a Map (Sencha Touch 2) Sencha Map
问题描述
我试图构建一个应用程序，一旦他或她点击地址，就给用户方向。
我的应用程序的结构以这种方式：
Am trying to build an app which gives a user direction once he or she clicks on the address. the structure of my App goes this way:
我已经设法编译列表中所需的所有地址，这意味着用户可以点击地址，它将加载第二页。查看下面的图片：
i have manage to compile all the address i want in a list form, meaning the user can click on the address and it will load the second page. view the picture below:
上图显示了我当前的应用程序和我目前的开发阶段，这些开发工作在那里停留，当应用程序加载时显示页面A，当您点击任何地址时，它将转到页面B.
我的应用程序的页面应该是一个带有标记的地图，显示地图的确切位置，如果可能，从用户当前位置给出确切地址的行车方向。查看下面的图片：
>
The picture above shows my current app and my current stage of development which am stuck there, when the app loads it show the Page A and when you click on any of the address, it goes to page B. Page be of my App should be a Map with a Marker showing the exact location of the address in the map and if possible giving a driving direction to the exact address from the users current location. view the picture below:
第二张照片正是我想要实现的，这意味着一旦用户点击任何地址，A地图将显示指向地址的确切位置的标记（纬度和Longtitude）提供，我需要的就像图片的样子。
The Second picture is exactly what i want to achieve, meaning that once the user clicks on any of the address, A map will show with the marker pointing on the exact location of the address (Latitude and Longtitude) is provided, i need just exactly like how the picture looks.
我的代码如下：
在我的视图面板中，我有以下代码：
my codes are as follows: In my view panel, i have the following codes:
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'
]
}
}）;
我的视图文件夹中的最后一个文件是：
the last file in my view folder is:
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(" ");
}
}）;
我的商店地址的确切坐标：
first地址：纬度： 4.600381长度：101.094174
第二个地址：纬度：5.336649长度：103.142497
第三个地址：纬度：2.184044长度：102.25982
i have the exact coordinates of the address in my store: first Address: Latitude:4.600381 Longtitude:101.094174 second Address: Latitude:5.336649 Longtitude:103.142497 Third Address: Latitude:2.184044 Longtitude:102.25982
将等待回复而我仍然研究自己来弄清楚事情。我相信你的回复将帮助我，并帮助许多其他人出现类似的问题。谢谢
Will be waiting for replies while i still research on my own to figure things out. i believe your replies will help me and help many others out there with similar problem. Thanks
我的商店：
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项目的纬度和经度。我现在的问题是让它工作的方式是，一旦用户点击列表中的任何项目，它将显示该特定地址的确切纬度和经度。请帮我看看我的App（控制器）中的逻辑。谢谢
So far, the results of the code above is just like the Image above, and can only display just one latitude and longitude for the 3items in the list. My problem now is to get it to work in such a way that once a user Tap on any of the item in the list, it will show the exact latitude and longitude of that particular address. please help me look into the logic in my App (controller). Thanks
推荐答案
你是自己的方向，但他会删除引脚（假设你添加拉/模型并将模型传递给创建时的视图）：
You're on your own for directions but he're dropping the pins (Assuming you add lat/long to your model and pass the model to the view when its created):
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);
}
});
编辑
这里是纬度和经度的模型添加的字段：
EDIT Here is the model with the latitude and longitude fields added:
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(" ");
}
});
另外，附加字段的商店：
And the store with the additional fields:
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
