谷歌地圖API如何設置當前位置標記

Question

我正在學習谷歌地圖API，並堅持在這個問題，當我試圖將當前座標添加到數組。這裏是我的代碼：

var locations = []; 

在初始化（）我有：

function initialize() { 
    infowindow = new google.maps.InfoWindow(); 
    var myOptions = { 
     zoom: 10, 
     mapTypeControl: true, 
     navigationControl: true, 
    } 
    map = new google.maps.Map(document.getElementById("map"), myOptions); 

    add_location('Place 1', 37.2846372, -123.3270422); 
    set_current_location(); 
    set_markers(new google.maps.LatLngBounds(), map); 
} 

第一個標誌設置，而set_current_location（）似乎並沒有工作。這裏是其餘的代碼：

// add new location to the locations array 
function add_location(description, lastitude, longtitude) { 
    locations.push([description, lastitude, longtitude]); 
} 

// Set all the markers in the location arrays and bound/frame the map 
function set_markers(bounds, map) { 
    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map 
     }); 
     bounds.extend(marker.position); 
     google.maps.event.addListener(marker, 'click', (function (marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
    map.fitBounds(bounds); 
} 

// Get current location based on the IP Address 
function set_current_location() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      var pos = new google.maps.LatLng(position.coords.latitude, 
      position.coords.longitude); 
      var myLat = position.coords.latitude; 
      var myLong = position.coords.longitude; 
      add_location('My location', position.coords.latitude, position.coords.longitude); 
     }); 
    } else { 
     alert("Geolocation is not supported by this browser."); 
    } 
} 

任何人都可以幫助或給我一個提示嗎？我想將當前位置添加到位置數組，以便可以跟蹤我已添加的位置數。非常感謝。

Answer 1

如果您只是將set_markers()移動到success的末端，並且用戶拒絕分享他的位置，您將無法獲得地圖，只能看到灰色區域。沒有center爲您的地圖設置是必需的屬性。更好地界定它喜歡：

var myOptions = { 
    zoom: 10, 
    center: new google.maps.LatLng(37.339386, -121.894955), 
    mapTypeControl: true, 
    navigationControl: true, 
} 
map = new google.maps.Map(document.getElementById("map"), myOptions); 
... 

此外，您也可以撥打set_markers()在error回調getCurrentPosition()末，這樣的情況下，用戶拒絕他的位置共享，則可以顯示可用的位置：

// Get current location based on the IP Address 
function set_current_location() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      /* 
      var pos = new google.maps.LatLng(position.coords.latitude, 
              position.coords.longitude); 
      var myLat = position.coords.latitude; 
      var myLong = position.coords.longitude; 
      */ 
      add_location('My location', 
         position.coords.latitude, 
         position.coords.longitude); 

      set_markers(new google.maps.LatLngBounds(), map); 
     }, function error(err) { 
      console.log('error: ' + err.message); 
      set_markers(new google.maps.LatLngBounds(), map);    
     }); 
    } else { 
     alert("Geolocation is not supported by this browser."); 
    } 
} 

請參閱example at jsbin