在Google地圖上添加標記到當前位置

Question

您是否有任何人知道如何在Google地圖上使用sencha在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

我試着在谷歌瀏覽器上運行你的代碼。在授予瀏覽器訪問我當前位置的權限後，似乎只會在第一次調用locationupdate事件。刷新頁面之後，locationupdate事件不再被調用，因爲我已經授予瀏覽器訪問我當前位置的權限。

您可以嘗試先設置您的GeoLocation對象並使用它將用戶的座標保存在變量中。我相信，你不必在地圖的afterrender函數中使用它。你可以嘗試輸出你的center變量console.log()，看看你是否正確地獲取用戶的位置。

你有了位置後，不應該很難在它上面放置一個標記。