How Can I Get marker on current location in map in Sencha-Touch2.0

后端 未结 3 1813
不思量自难忘°
不思量自难忘° 2020-12-20 21:11

Hey friends i m new to Sencha Touch platform.

And I want to find user current location with marker please help me out. i s

3条回答
  •  情话喂你
    2020-12-20 21:51

    Nice question. I faced a similar problem before. But, later, I figured out the solution.

    Here's how you can solve it.

    • Either use Phonegap's Geolocation API or ..
    • Use Ext.util.Geolocation from Sencha Touch API

    Demo with Phonegap's Geolocation API

    1. Get the geolocation via the geolocation 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. Then use the values of lat and lng to set the map's center to it as well as set the marker's position to that value.

       ... 
       ...
       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
       });
       ...
       ...
      

提交回复
热议问题