[英]Sencha Touch 2 Multiple Latitude and Longitude on Sencha Map
I am building an app which contains a list of addresses. 我正在构建一个包含地址列表的应用程序。 This app is working in such a way that once the user clicks on each of the items (addresses) in the list, the next page shows a map, and the map has a marker which points to the exact location of the address clicked on.
这个应用程序的工作方式是,一旦用户单击列表中的每个项目(地址),下一页就会显示一张地图,并且该地图上有一个标记,指向所点击地址的确切位置。 This is made possible due to the Latitude and Longitude coordinates stated in code.
由于代码中指定了纬度和经度坐标,因此可以做到这一点。 My problem is that I have more than one address, and each of these addresses have a unique longitude and latitude.
我的问题是我有多个地址,并且每个地址都有唯一的经度和纬度。 I want to make my app work in such a way that when a user clicks on any address they are interested in, the app will open a page and show the map and a marker pointing to the exact location of the address on the map.
我想以一种方式使我的应用程序正常工作,即当用户单击他们感兴趣的任何地址时,该应用程序将打开一个页面并显示地图,并显示指向该地址在地图上确切位置的标记。 My code's below: it is working perfectly, BUT when the user clicks on the address, it takes them to the same logitude and latitude.
我的代码如下:它工作正常,但是当用户单击该地址时,会将其带到相同的纬度和纬度。
My store: 我的商店:
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',
}, ]
}
});
My controller: 我的控制器:
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);
},
},
})
},
});
My view: 我的观点:
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
}
},
}
});
My model: 我的模特:
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(" ");
}
});
Help me out please. 请帮帮我。 I need each of the addresses on the list to be tagged with a latitude and longitude so that when the user clicks on the address, it will point to the exact location the map.
我需要使用纬度和经度标记列表上的每个地址,以便当用户单击该地址时,它将指向地图的确切位置。
Take a look at the kentuni app on GitHub. 看看GitHub上的kentuni应用程序。 It is in sencha touch v1 and uses leaflet but it should be a good reference - it does exactly what you want with a list of locations that when clicked pushes a map view with marker.
它是在sencha touch v1中使用的,并且使用了传单,但它应该是一个很好的参考-它完全符合您想要的位置列表,当单击该位置时,它会用标记推动地图视图。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.