Sencha Touch 2 App-功能要求

Question

在Sencha Touch V2中开发了一个应用程序。此应用程序包含一个Mappa面板，其中有一个地图，该地图上已填充了与从json文件获取的各个位置（咖啡馆）相对应的标记。

“ App Map”面板的功能如下：

在标记上单击，将弹出起点和终点位置文本，用户在其中输入起点和终点位置的值，再次单击任何其他标记将产生起点和终点位置的方向，并将其绘制在地图上。

我们需要实现以下功能：

我们需要方便地在单击按钮时在绘制到地图上的google地图中输入位置的方向，还需要重新创建地图实例（刷新地图）并将现有标记放置在另一个按钮上（地图清除按钮），从而创建一个新实例供用户查找不同起点和终点的路线。

我们遇到的问题是：

1. 在为按钮定义处理程序时，单击不会导致执行任何操作（获取方向处理程序不起作用）。
2. 为了重新创建地图实例，我们将地图设置为null，但这导致地图没有标记。

任何人都可以帮助完成Sencha touch版本2中此应用程序的任务。

Answer 1

很久以前就创建了这种应用程序/功能。 您可以创建一个浮动formpanel并在其中提供source端点和destination端点的字段条目。

然后，您可以点击“获取路线”按钮，编写以下代码，

代码段：-

tap: function() {
   var src = Ext.getCmp('srcField');
       var destn = Ext.getCmp('destField');
       var mode = Ext.getCmp('travelMode');
       var request = {
        origin: src.getValue(), 
        destination: destn.getValue(),
        travelMode: mode.getPressedButtons()[0].getText(),
       };

     Ext.Ajax.request({
      url: 'http://maps.googleapis.com/maps/api/directions/json?origin='+src.getValue()+'&destination='+destn.getValue()+'&mode='+mode.getPressedButtons()[0].getText()+'&sensor=false';
          method:'post',

          success : function(response) {
              showDirections(response,request);
          }         
     });

     function showDirections(res,req) {
       var directionsService = new google.maps.DirectionsService();
       var directionsDisplay = new google.maps.DirectionsRenderer();
       var map = Ext.getCmp('googleMapComponentId').getMap();

       directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
             directionsDisplay.setDirections(response);
             directionsDisplay.setMap(map);
       }
     });
  }