Question

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

{
  xtype: 'map',
  useCurrentLocation: true
}

Answer 1

我定义了一个自定义地图类：

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

所以它会在我当前的位置上呈现一个标记。简单。

Answer 2

这是代码。它将显示带边界的多个标记：

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

Answer 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： - ）

干杯！

Answer 4

以下是显示位置当前位置的代码

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();

Sencha touch 2 - 在地图上显示当前位置

4 个答案: