2011-11-20 71 views
2

我想显示我的当前位置并获取位置坐标以在附近搜索。从下面的代码开始显示我在地图上的位置,但它不起作用。Sencha touch 2 - 在地图上显示当前位置

{ 
    xtype: 'map', 
    useCurrentLocation: true 
} 
+0

对于您必须指定纬度和Longitute值 –

回答

3

我认为这是ST2中的一个错误。我问(我认为你做了:-))这个问题也在Sencha论坛:http://www.sencha.com/forum/showthread.php?156501-Maps-with-sencha-touch

我在那个论坛的代码没有工作。我正在使用的代码如下:

index.html文件看起来是这样的:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Sample app</title> 

    <script type="text/javascript" src="lib/touch/sencha-touch-all-debug.js"></script> 
    <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 

    <script type="text/javascript"> 
     Ext.Loader.setConfig({ 
      enabled : true, 
      path : { 
       PPL : 'ppl.js' 
      } 
     }); 

     Ext.setup({ 
      tabletStartupScreen : 'tablet_startup.png', 
      phoneStartupScreen : 'phone_startup.png', 
      icon    : 'phone_startup.png', 
      onReady    : function() { 
       Ext.create('PPL.App', { 
        fullscreen : true 
       }); 
      } 
     }) 
    </script> 
</head> 
<body> 
</body> 
</html> 

而且我ppl.js看起来是这样的:

Ext.define('PPL.App', { 
    extend: 'Ext.Panel', 
    layout: 'vbox', 

    config: { 
     items: [{ 
      xtype: 'toolbar', 
      title: 'Sample MAP' 
     }, { 
      xtype: 'panel', 
      layout: 'fit', 
      items: [{ 
       xtype: 'map', 
       useCurrentLocation: true 
      }] 
     }] 
    } 
}); 

如果我改变我ppl.js写入以下内容:

Ext.define('PPL.App', { 
    extend: 'Ext.Map', 
    layout: 'fit', 
    config: { 
     items: [{ 
      xtype: 'map', 
      useCurrentLocation: false 
     }] 
    } 
}); 

然后它正在工作! 因此,我认为我们需要等到下一个版本发布,同时学习ST2 :-)

干杯!

+0

您好,感谢您的答复当前位置的代码。我会试试这个.. – Pravin

7

我定义的自定义地图类:

Ext.define("FindMyMoney.view.MapView", { 
    extend: "Ext.Map", 
    xtype: 'mapview', 
    config: { 
     useCurrentLocation: true, 
     listeners: { 
      maprender : function(comp, map){ 
       new google.maps.Marker({ 
        position: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude()), 
        map: map 
       }); 
      } 
     } 
    } 
}); 

所以这会使我的当前位置的标记。简单。

5

这是代码。它会显示多个标记与界限:

Ext.define("iME.view.Maps", { 
    extend: "Ext.Map", 
    xtype: 'mapview', 
    config: { 

     mapOptions: {  
      center: new google.maps.LatLng(28.80010128657071, 77.28747820854187), 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      mapTypeControl: false 
     }, 

     listeners: { 
      maprender: function (comp, map) { 

       var markersll = [ 
        ['Noida', 28.80010128657071, 77.28747820854187], 
        ['Coogee Beach', 24.80010128565, 73.2874782084457], 
        ['Cronulla Beach', 25.80010128657071, 76.28747820854187], 
        ['Manly Beach', 28.80010128657071, 72.28747820854187], 
        ['Maroubra Beach', 9.052234, 75.243685] 
       ]; 

       var infowindow = new google.maps.InfoWindow(); 
       var marker, i, pos; 
       var bounds = new google.maps.LatLngBounds(); 
       for (i = 0; i < markersll.length; i++) { 

        pos = new google.maps.LatLng(markersll[i][1], markersll[i][2]); 
        bounds.extend(pos); 
        marker = new google.maps.Marker({ 

         position: pos, 
         animation: google.maps.Animation.BOUNCE, 
         icon: 'http://thumb10.shutterstock.com/thumb_small/429058/131292377/stock-vector-map-super-marker-icon-131292377.jpg', 
         map: map, 
         title: 'Click Me ' + i 
        });  

        google.maps.event.addListener(marker, 'click', (function (marker, i) { 
         return function() { 
          infowindow.setContent(markersll[i][0]); 
          infowindow.open(map, marker); 
         } 
        })(marker, i)); 
        map.fitBounds(bounds); 
       } 
      } 
     } 
    }  
}); 
+0

好的例子...................................... ... – Gendaful

0

这里是展示位置当前位置

var geo = Ext.create('Ext.util.Geolocation', { 
autoUpdate: false, 
listeners: { 
    locationupdate: function(geo) { 
    var currentLat = geo.getLatitude(); 
    var currentLng = geo.getLongitude(); 
    var altitude = geo.getAltitude(); 
    var speed = geo.getSpeed(); 
    var heading= geo.getHeading(); 
    }, 
    locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) { 
    if(bTimeout) 
     Ext.Msg.alert('Timeout occurred',"Could not get current position"); 
    else 
     alert('Error occurred.'); 
    } 
    } 
} 
}); 
geo.updateLocation();