以下のコードは、JSON ファイル内のデータから追加されたマーカーを使用してマップを表示するのを容易にします。あるマーカーから別のマーカーへの getDirections も容易になりました。
必要事項: ユーザーの現在位置を検出し、その位置にマーカーを追加し、その位置を以下のコード内で指定された開始変数に適用して、その現在位置からタップされたマーカーへの道順をプロットできるようにします。
Ext.define('Navigator.view.mapcard', {
extend: 'Ext.Map',
xtype: 'mapcard',
config: {
title: 'Mappa',
iconCls: 'maps',
// useCurrentLocation: true,
mapOptions: {
center: new google.maps.LatLng('24.859622', '18.84089'),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners: {
maprender: function (comp, map) {
var data = Ext.getStore('Contacts'),
marker = [], infowindow = [],
dist = [];
data.on('load', function () {
data.each(function (rec, idx, cnt) {
var latLng = new google.maps.LatLng(rec.get('latitude'), rec.get('longitude'));
marker[idx] = new google.maps.Marker({
map: map,
position: latLng
}),
infowindow[idx] = new google.maps.InfoWindow({
content: rec.get('title')
});
google.maps.event.addListener(marker[idx], 'click', function () {
infowindow[idx].open(map, marker[idx]);
if (dist.length === 0) {
dist.push(rec.get('title'));
} else if (dist.length === 1) {
dist.push(rec.get('title'));
} else if (dist.length > 1) {
// need reload map
dist = [];
dist.push(rec.get('title'));
}
if (dist.length === 2) {
var start = dist[0],
end = dist[1],
request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var directionsDisplay = new google.maps.DirectionsRenderer(),
directionsService = new google.maps.DirectionsService();
directionsDisplay.setMap(map);
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
});
//setTimeout(function () { map.panTo(latLng) }, 1000);
});
});
}
}
}
});