javascript - Sencha-Touch2.0 でマップの現在位置にマーカーを取得するにはどうすればよいですか?

Question

Sencha Touchプラットフォームは初めてです。

そして、私を助けてくれるユーザーを見つけたいですcurrent location。markerこの状態に陥りました。

私にとって新しい良いチュートリアルはありますか?それから私と共有してください..

お時間をいただきありがとうございます。

ラヴィ・パテル

Answer 1

良い質問です。以前も同様の問題に直面しました。しかし、後で解決策を見つけました。

これを解決する方法は次のとおりです。

• Phonegap の Geolocation APIを使用するか、..
• Sencha Touch API からExt.util.Geolocationを使用する

Phonegap の Geolocation APIを使用したデモ

1. 地理位置情報 API を介して地理位置情報を取得します。

   vat lat, lng;
   var geoLocationOptions = { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };
   navigator.geolocation.getCurrentPosition(geoLocationSuccess,geoLocationError,geoLocationOptions);
   
   function geoLocationSuccess(position) {
       lat = position.coords.latitude;
       lng = position.coords.longitude;
       Ext.Msg.alert("Geolocation","Latitude:"+ lat +", Longitude:"+ lng); 
   }
   
   function geoLocationError() {
      Ext.Msg.alert('Error','Error while getting geolocation');
   }
   

2. 次に、lat と lng の値を使用して、マップの中心をそれに設定し、マーカーの位置をその値に設定します。

    ... 
    ...
    var position = new google.maps.LatLng(lat,lng);
    map = this.add({
           xtype: 'map',
           getLocation: true,
           autoLoad: true,
           mapOptions: {
               zoom: 15,
               center: position,
               mapTypeId: google.maps.MapTypeId.ROADMAP,
               navigationControl: true,
               zoomControl: true,
               mapTypeControl: true,
               scrollwheel: true,
               scaleControl: true,
               zoomControlOptions: {
                   style: google.maps.ZoomControlStyle.LARGE
               }
           }
       });
   
    marker = new google.maps.Marker({
           id: 'geoLocMarker',
           position: position,
           map: map.getMap(),
           visible: true
    });
    ...
    ...
   

Answer 2

また、sencha touch 2.3.1
Using Ext.util.Geolocation クラスを使用して同様のアプリで現在の位置を取得し、次のコードを使用して currentPosition を自動的に更新します。

Ext.create('Ext.util.Geolocation', {
autoUpdate: true,
allowHighAccuracy: true,
frequency: '5000', // set the milliseconds for the location update
listeners: {
locationupdate: function(geo) {
    latitude=Global.currentUserLocations.currentLat;
    longitude=Global.currentUserLocations.currentLong;
    if(Global.currentUserPositionMarker)
    {
        latlng1=new google.maps.LatLng(latitude, longitude);
        Global.currentUserPositionMarker.setPosition(latlng1);
    }
   }
 }
});  

上記のコードは私にとってはうまくいきました.currentLocationを取得するためにアプリで既に使用し、マーカーをcurrentPositionに移動しました.

Answer 3

次のように Ext.Map.getGeo() を使用するだけで、はるかに簡単になります。

    var geo = extmap.down("#Map").getGeo();
    var currentPosition = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());

マップがインスタンス化されている限り、ブラウザー クライアントで許可されている場合は、現在の場所を取得する必要があります。

チッ！