добавление маркера к вашей текущей позиции на картах Google

Question

Кто-нибудь из вас знает, как добавить маркер на вашей текущей позиции в Google Maps с помощью Sencha?

Это мой код:

var map;
var defaultLocation;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var spots;
var infowindow = new google.maps.InfoWindow();

owt.views.RoutePanel = Ext.extend(Ext.Panel, {

    title: 'route',
    fullscreen:true,
    layout: 'card',
    items: [
        map = new Ext.Map({
            useCurrentLocation: true,
            mapOptions: {zoom:10},
            listeners: {
                delay: 500,
                afterrender: function() {
                    var geo = new Ext.util.GeoLocation({
                        accuracy: 1,
                        autoUpdate: true,
                        listeners: {
                            locationupdate: function (geo) {
                                center = new google.maps.LatLng(geo.latitude, geo.longitude);
                                zoom = 10;
                               if (map.rendered){
                                    map.update(center)

                                   }
                                else{
                                    map.on('activate', map.onUpdate, map, {single: true, data: center});}
                            },
                            locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                                if (bTimeout) {
                                    alert('Timeout occurred.');
                                }
                                else {
                                    alert('Error occurred.');
                                }
                            }
                        }
                    });
                    geo.updateLocation();
                    spots = [];
                    for (var i in owt.stores.spotStore.data.map) {
                        spots.push(new google.maps.LatLng(owt.stores.spotStore.data.map[i].data.lat,
                                owt.stores.spotStore.data.map[i].data.lng))
                        switch (owt.stores.spotStore.data.map[i].data.categorie_id) {
                            case 1:
                                var image = 'assets/images/monumenten_icon.png';
                                break;
                            case 2:
                                var image = 'assets/images/horeca_icon.png';
                                break;
                            case 3:
                                var image = 'assets/images/toilet_icon.png';
                                break;
                            case 4:
                                var image = 'assets/images/shopping_icon.png';
                                break;
                        }
                        var markers = [];

                        var spotMarker = new google.maps.Marker({
                            animation: google.maps.Animation.DROP,
                            position: new google.maps.LatLng(owt.stores.spotStore.data.map[i].data.lat,owt.stores.spotStore.data.map[i].data.lng),
                            map: this.map,
                            icon: image
                        });

                        google.maps.event.addListener(spotMarker, 'dblclick', (function(spotMarker, i) {

                            return function() {
                                var win1 = new Ext.Panel({
                                    floating:true,
                                    layout: "card",
                                    centered:false,
                                    scroll: 'vertical',
                                    styleHtmlContent: true,
                                    centered: true,
                                    width:280,
                                    height:140,
                                    html:'<img src="assets/images/spots/' + owt.stores.spotStore.data.map[i].data.naam.replace(/\s/g, "") + '.jpg"<div class="floatpanel"></div><h3>' + owt.stores.spotStore.data.map[i].data.naam + '</h3><p>' + owt.stores.spotStore.data.map[i].data.omschrijving + '</p></div>'
                                }).show()
                            }
                        })(spotMarker, i));
                    }
                    for (var i in owt.stores.groepStore.data.map) {
                         var groepMarker = new google.maps.Marker({
                            animation: google.maps.Animation.DROP,
                            position: new google.maps.LatLng(owt.stores.groepStore.data.map[i].data.latitude,owt.stores.groepStore.data.map[i].data.longitude),
                            map: this.map,
                             icon: 'assets/images/groepen_icon.png'
                        });
                        (groepMarker, i);
                    }
                    directionsDisplay = new google.maps.DirectionsRenderer();
                    var myOptions = {
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    directionsDisplay.setMap(this.map);
                    calcRoute();
                }
            }
        }
    )]
});


function calcRoute() {
    var waypts = [];
    for (var i = 1; i < 9; i++) {
        waypts.push({
            location:new google.maps.LatLng(owt.stores.spotStore.data.map[i].data.lat, owt.stores.spotStore.data.map[i].data.lng),
            stopover:true});
    }
    start = new google.maps.LatLng(50.80520247265613, 3.274827003479004);
    end = new google.maps.LatLng(50.8252946155155, 3.2799339294433594);
    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
        }
    });
};

Ext.reg('owt-loginpanel', owt.views.RoutePanel);

Я пробовал дюжину разных вещей, ноя просто не могу получить маркер, чтобы показать.

Answer 1

Я попытался запустить ваш код в Google Chrome. Кажется, что событие locationupdate вызывается только в первый раз после того, как я предоставляю браузеру разрешение на доступ к моему текущему местоположению. После обновления страницы событие locationupdate больше не вызывалось, поскольку я уже дал браузеру разрешение на доступ к своему текущему местоположению.

Вы можете сначала попытаться настроить объект GeoLocation и использовать его для сохранения координат пользователя в переменной. Я полагаю, вам не нужно использовать его внутри функции карты afterrender. Вы можете попробовать вывести переменную center с помощью console.log(), чтобы проверить, правильно ли вы определяете местоположение пользователя.

После того, как у вас есть местоположение, на него не должно быть сложно поставить маркер.