1

以下のコードは、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);
                    });
                });


            }
        }

    }
});
4

0 に答える 0