【问题标题】:Google Map asks for location ok, but doesn't centre map谷歌地图要求位置确定,但没有居中地图
【发布时间】:2017-11-02 07:39:16
【问题描述】:

我正在加载我的地​​图以及从 FusionTable 中提取的标记。如果他们接受请求,我现在尝试将地图围绕用户位置居中。

在加载页面时,浏览器要求访问我的位置,我同意,但地图没有以我的位置为中心。我也有搜索地址功能,但不认为这会影响事情。

我的代码:

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);

【问题讨论】:

  • 有没有机会为 jsfiddle 提供虚拟数据?
  • 嗨@John 虚拟数据来自哪里?
  • 只是来自 FusionTable 的数据,我们可以从那里看到地图的工作和调试
  • 您可以在这里查看表格fusiontables.google.com/… 我认为 fusiontable 不是问题。我能够很好地加载地图上的所有标记。我只是无法让地图专注于用户当前的位置。

标签: javascript google-maps google-maps-api-3 google-fusion-tables


【解决方案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/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-21
    • 1970-01-01
    相关资源
    最近更新 更多