Google지도의 현재 위치에 마커 추가하기

Question

sencha를 사용하여 Google지도의 currentPosition에 마커를 추가하는 방법을 아는 사람이 있습니까? 나는 다스 다른 일을 시도했지만 난 그냥 캔트 마커가 표시 할 수

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 크롬에서 코드를 실행 해 보았습니다. locationupdate 이벤트가 브라우저에 현재 위치에 대한 액세스 권한을 부여한 후에 만 ​​처음으로 호출되는 것처럼 보입니다. 페이지를 새로 고친 후 locationupdate 이벤트는 이미 브라우저에 현재 위치에 대한 액세스 권한을 부여한 이후 더 이상 호출되지 않았습니다.

GeoLocation 개체를 먼저 설정하고이를 사용하여 변수에 사용자의 좌표를 저장할 수 있습니다. 나는 Map의 afterrender 함수 안에서 사용할 필요가 없다고 믿는다. 변수를 console.log()과 함께 출력하여 사용자 위치가 올바르게 표시되는지 확인할 수 있습니다.

위치를 찾은 후에 마커를 올려 놓으면 안됩니다.