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