使用iPhone位置更新谷歌地圖

我正在建設一個週期信息網站，希望能夠從iPhone獲取用戶位置，以便更新我的Google地圖並向用戶提供相關信息。有一個名爲Geolocation的Drupal模塊，它使用HTML5選項來執行此操作，並且我已經找到它在下面的模塊中執行任務的代碼。使用iPhone位置更新谷歌地圖

// START: Autodetect clientlocation. 
      // First use browser geolocation 
      if (navigator.geolocation) { 
      browserSupportFlag = true; 
      $('#geolocation-help-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').append(Drupal.t(', or use your browser geolocation system by clicking this link') +': <span id="geolocation-client-location-' + i + '" class="geolocation-client-location">' + Drupal.t('My Location') + '</span>'); 
      // Set current user location, if available 
      $('#geolocation-client-location-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').click(function() { 
       navigator.geolocation.getCurrentPosition(function(position) { 
       latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
       Drupal.Geolocation.maps[i].setCenter(latLng); 
       Drupal.Geolocation.setMapMarker(latLng, i); 
       Drupal.Geolocation.codeLatLng(latLng, i, 'geocoder'); 
       }, function() { 
       Drupal.Geolocation.handleNoGeolocation(browserSupportFlag, i); 
       }); 
      }); 
      }

有沒有人有任何Google Maps API V3的實現這個或類似的經驗？我希望用戶不得不點擊「我的位置」或等價物，然後使用他們的iPhone位置來更新地圖，而不是自動請求它。這是我的地圖和我擁有的一系列標記。我如何利用iPhone的位置來更新它？

function initialize() { 

    var myOptions = { 
    zoom: 14, 
    center: new google.maps.LatLng(51.51251523, -0.133201961), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var bikeLayer = new google.maps.BicyclingLayer(); 
    bikeLayer.setMap(map); 

    setMarkers(map, spots); 
} 


var spots = [ 

['Marylebone', 51.51811784, -0.144228881, '2.png', 2901, 'Broadcasting House - Marylebone</br>Available Bikes: 1</br>Number of Docks: 13</br> View more information about <a href="/node/2901">this dock</a>'], 


['Fitzrovia', 51.51991453, -0.136039674, '3.png', 2908, 'Scala Street - Fitzrovia</br>Available Bikes: 8</br>Number of Docks: 21</br> View more information about <a href="/node/2908">this dock</a>'], 


['Fitzrovia', 51.52351808, -0.143613641, '3.png', 2923, 'Bolsover Street - Fitzrovia</br>Available Bikes: 6</br>Number of Docks: 19</br> View more information about <a href="/node/2923">this dock</a>'], 


['Fitzrovia', 51.52025302, -0.141327271, '3.png', 2975, 'Great Titchfield Street - Fitzrovia</br>Available Bikes: 5</br>Number of Docks: 19</br> View more information about <a href="/node/2975">this dock</a>'], 


['Bloomsbury', 51.51858757, -0.132053392, '3.png', 2982, 'Bayley Street - Bloomsbury</br>Available Bikes: 12</br>Number of Docks: 25</br> View more information about <a href="/node/2982">this dock</a>'] 

]; 

function setMarkers(map, locations) { 

     var image1 = new google.maps.MarkerImage('amber-spot.png', 
     new google.maps.Size(30, 36), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 

    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < locations.length; i++) { 
    var spot = locations[i]; 
    var myLatLng = new google.maps.LatLng(spot[1], spot[2]); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: spot[3], 
     title: spot[0], 
     zIndex: spot[4], 
     html: spot[5] 
    }); 
    bounds.extend(myLatLng); 
    map.fitBounds(bounds); 
    var infowindow = new google.maps.InfoWindow({ 
}); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(this.html); 
    infowindow.open(map,this); 
}); 
    } 
}

感謝

李

來源

2012-01-17 Lee Woodman

澄清：您希望用戶使用地圖在您的站點上跳躍，單擊顯示我的位置，然後您將保存其位置，然後將地圖窗口重新定位到其位置？ – 2012-01-17 19:05:15

是的，這就是邁克爾 – 2012-01-17 20:15:41