煎茶触摸 2 地图对列表中的每个项目使用不同的纬度和经度 (Sencah)
Sencha Touch 2 Map using different Latitude and Longitude for each item in List (Sencah)
我正在构建一个包含地址列表的应用程序。此应用程序的工作方式是,一旦用户单击列表中的每个项目(地址),下一页将显示地图,并且地图具有指向单击地址的确切位置的标记。这是由于代码中规定的纬度和经度坐标而实现的。我的问题是我有多个地址,每个地址都有唯一的经度和纬度。我想让我的应用程序以这样的方式工作:当用户单击他们感兴趣的任何地址时,应用程序将打开一个页面并显示地图和指向地图上地址确切位置的标记。我的代码如下:它运行良好,但是当用户单击地址时,它会将他们带到相同的逻辑和纬度。
我的商店:
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',
}, ]
}
});
我的控制器:
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);
},
},
})
},
});
我的观点:
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
}
},
}
});
我的模型:
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(" ");
}
});
请帮帮我。我需要用纬度和经度标记列表中的每个地址,以便当用户单击地址时,它将指向地图的确切位置。
你的行:
var position = new google.maps.LatLng(5.978132,116.072617);
固定到相同的坐标,因此永远不会改变。
在我的应用程序中,我让视图向控制器触发一个事件,然后在控制器中引用记录的坐标,然后将其设置为地图。
在视图:
config: {
layout: 'fit',
items: [
{
xtype: 'map',
listeners: {
maprender: function (extMapComponent, googleMapComp) {
this.fireEvent('googleMapRender', googleMapComp);
}
}
}
]
}
控制器:
refs: {
mapRef: 'map'
},
Control: {
mapRef: {
googleMapRender: 'onGoogleMapRender'
}
}
onGoogleMapRender: function (googleMap) {
// this.selectedRecord should be set when you select the item in the list
// so that you can pull the coordinates off
var record = this.selectedRecord;
var long = record.get("Longitude");
var lat = record.get("Latitude");
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long);
});
marker.setMap(googleMap);
}
相关文章:
- “可绘制地图”设置地图选项“纬度-经度”
- 如何用javascript获取谷歌地图的经度和纬度
- 使用API在我的网站Google-Map上显示搜索地址的纬度和经度
- 使用传单在地图框上显示纬度和经度
- 如何使用谷歌地图中的纬度和经度搜索附近的位置
- 如何在不重新加载整个网页的情况下动态更改经度和纬度的值
- 地理位置和计算从当前纬度/液化天然气到另一纬度/液化石油气的距离
- 如何通过javascript从jsongooglemapapi中获取地理编码纬度和经度
- 如何使用XML中的经度和纬度值在地图上显示位置
- 谷歌地图 api 动态获取纬度和液化天然气
- 为什么纬度结果对象从谷歌地图 API 更改
- 使用地图框 API 将邮政编码转换为纬度和经度
- 如何从地理编码地址查找纬度液化天然气
- 在 PHP 或 JavaScript 中获取用户的纬度和经度,以便在 PHP 中使用
- 给定带有位置“loc”的链接,搜索使用谷歌地图API从标记中提取纬度和经度
- 从地理定位字符串中提取纬度/液化
- 在数据库上发布长和纬度
- 世界的最大纬度和长边界 - 谷歌地图API LatLngBounds().
- 在钛地图中计算纬度增量和经度增量[Android]
- 煎茶触摸 2 地图对列表中的每个项目使用不同的纬度和经度 (Sencah)