1

我正在從我的地圖加載我的地​​圖以及從FusionTable中拉出的標記。如果他們接受請求,我現在試圖圍繞用戶位置周圍的地圖居中。Google地圖詢問位置是否正常,但沒有居中顯示地圖

在加載頁面時,瀏覽器要求訪問我的位置,我同意,但地圖並不以我的位置爲中心。我也有搜索地址功能,但不要認爲這會影響事情。

我的代碼:

function initMap() { 

    var coords = new google.maps.MVCObject(); 
    coords.set('latlng', new google.maps.LatLng(51.525, -0.1)); 

    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(success); 
    } 

    //set new value for coords 
    function success(position) { 
    coords.set('latlng', 
     new google.maps.LatLng(position.coords.latitude, 
      position.coords.longitude)); 
      } 

    var defaultZoom = 13; 
    var tableId = '#############'; 
    var locationColumn = 'Location'; 
    var geocoder = new google.maps.Geocoder(); 
    var styles = [ 
    ... 
]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     center: coords.get('latlng'), 
     zoom: defaultZoom, 
     styles: styles 
    }); 


    var layer = new google.maps.FusionTablesLayer({ 
     query: { 
     select: locationColumn, 
     from: tableId 
     }, 
     options: { 
     styleId: 2, 
     templateId: 2 
     }, 
     map: map 
    }); 

    var zoomToAddress = function() { 
     var address = document.getElementById('address').value; 
     geocoder.geocode({ 
     address: address 
     }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      map.setZoom(16); 

      // OPTIONAL: run spatial query to find results within bounds. 
      var sw = map.getBounds().getSouthWest(); 
      var ne = map.getBounds().getNorthEast(); 
      var where = 'ST_INTERSECTS(' + locationColumn + 
       ', RECTANGLE(LATLNG' + sw + ', LATLNG' + ne + '))'; 
      layer.setOptions({ 
      query: { 
       select: locationColumn, 
       from: tableId, 
       where: where 
      } 
      }); 
     } else { 
      window.alert('Address could not be geocoded: ' + status); 
     } 
     }); 
    }; 

    google.maps.event.addDomListener(document.getElementById('search'), 
     'click', zoomToAddress); 
    google.maps.event.addDomListener(window, 'keypress', function(e) { 
     if (e.keyCode == 13) { 
     zoomToAddress(); 
     } 
    }); 
    google.maps.event.addDomListener(document.getElementById('reset'), 
     'click', function() { 
      map.setCenter(defaultCenter); 
      map.setZoom(defaultZoom); 
      layer.setOptions({ 
      query: { 
       select: locationColumn, 
       from: tableId 
      } 
      }); 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
+0

任何機會提供一個jsfiddle與虛擬數據? –

+0

你好@John從哪裏獲得虛擬數據? –

+0

剛剛來自FusionTable的數據,我們可以看到地圖的工作和從那裏調試 –

回答

1

你需要改變:

if (navigator.geolocation) {   
    navigator.geolocation.getCurrentPosition(success); 
} 

//set new value for coords 
function success(position) { 
    coords.set('latlng', new google.maps.LatLng(position.coords.latitude, 
    position.coords.longitude)); 
} 

要:

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     coords = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     }; 
     map.setCenter(coords); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    //since you set coords above this section it will default to that  
    } 

工作JS(我刪除了你的fusiontableID - 添加回至查看)

https://jsfiddle.net/cmjcs5eL/6/

+1

賓果!那就是訣竅。謝謝。 –

相關問題