Question

我是这里的新手，想在这个问题上寻求帮助。我有一个代码，应该映射并列出最近的5个诊所到用户当前位置。该诊所取自我上传的融合表数据。这是我的代码：

    function initialize() {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(3.148, 101.715),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer({
        query: {
          select: 'Location',
          from: '16JfuLxarMf5UjxThG2Tno_SZoNSZ_ExwbQyCeu0',
          orderBy: 'ST_DISTANCE(Location, LATLNG(3.148, 101.715))',
          limit: 6
     }
   });
     layer.setMap(map);
  }

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

我上面的代码用于映射最近的诊所，但它取决于坐标。我想要的是，它自动检测用户当前位置并映射并列出诊所。

我已经获得了地理定位的代码，如下所示：

    window.onload = function() {
            if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(handle_geo); 
                    $("#queryInput").change(doSearch);
                } else {
                    var map = document.getElementById("map-canvas");
                    map.innerHTML = "Geolocation is not available... have you considered a forward-thinking browser?";
                }   
        };

然而，当我将代码合并到此时：

  window.onload = function() {
            if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(handle_geo); 
                    $("#queryInput").change(doSearch);
                } else {
                    var map = document.getElementById("map-canvas");
                    map.innerHTML = "Geolocation is not available... have you considered a forward-thinking browser?";
                }   
        };

        function handle_geo(position){ 
            // Initialize the map with default UI.
                gMap = new google.maps.Map(document.getElementById("map-canvas"), {
                center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                zoom: 15,
                mapTypeId: 'roadmap'
            });

          var layer = new google.maps.FusionTablesLayer({
        query: {
          select: 'Location',
          from: '16JfuLxarMf5UjxThG2Tno_SZoNSZ_ExwbQyCeu0',
          orderBy: 'ST_DISTANCE(Location,'+map.getCenter().lat()+','+map.getCenter().lng()+'))',
          limit: 4
     }
   });
     layer.setMap(map);
  }

  google.maps.event.addDomListener(window, 'load', handle_geo);

它只设法放大用户当前位置，但未映射和列出最近的诊所。那么我该如何使这个工作？提前谢谢。

Answer 1

如果地理位置正确，您已经有变量lat，long可用作position.coords.latitude和position.coords.longitude，最好将这些变量传递给图层查询。见这里的工作示例： https://plnkr.co/edit/sphxJn?p=preview `function initialize（lat，long）{ google.maps.visualRefresh = true; “严格使用”; var map，层; map = new google.maps.Map（document.getElementById（“map-canvas”），{ center：new google.maps.LatLng（lat，long）， zoom：10， mapTypeId：'roadmap' }）;

    layer = new google.maps.FusionTablesLayer({
        query: {
          // Geotagged wikipedia articles, for test purpose
          // https://www.google.com/fusiontables/DataSource?docid=1LsJLUqlE_P2IYt4wFOHHi59fP_YWzdDoCKLlSPw
          select: 'Coordinates',
          from: '1LsJLUqlE_P2IYt4wFOHHi59fP_YWzdDoCKLlSPw',
          orderBy: 'ST_DISTANCE(Coordinates, LATLNG(' + lat + ',' + long + '))',
          //  Code for original table from SO-question below     
          //  select: 'Location',
          //  from: '16JfuLxarMf5UjxThG2Tno_SZoNSZ_ExwbQyCeu0',
          //  orderBy: 'ST_DISTANCE(Location, LATLNG(' + lat + ',' + long + '))',
          limit: 25
        }
      });
    layer.setMap(map);
  }

  function locate() {
    var lat, long;
    lat = 3.148,
    long = 101.715;
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function success(position) {
        lat = position.coords.latitude;
        long = position.coords.longitude;
        initialize(lat, long);
      }, function (error) {
        switch (error.code) {
        case error.TIMEOUT:
          alert('Timeout. Try again.');
          return initialize(lat, long);
        case error.POSITION_UNAVAILABLE:
          alert('Your position is not available at the moment.');
          return initialize(lat, long);
        case error.PERMISSION_DENIED:
          alert('No geolocation. Things wont work out this way.');
          return initialize(lat, long);
        case error.UNKNOWN_ERROR:
          alert('Unknown error. Fyi.');
          return initialize(lat, long);
        }
      });
    } else {
      alert('Your device does not support geolocation');
      // IE-8 issue...
      return initialize(lat, long);
    }
  }`

哦，为什么你的代码没有成功;你同时调用了“handle_geo”（google.maps.event.addDomListener（window，'load'，handle_geo）;和第一个匿名地理定位函数：window.onload = function etc ...同时（两个不同）事情搞砸了。如果你看看我的例子，你会看到我在最后一行用onload事件调用“locate”（获取位置的函数），然后“locate”然后传递从该位置检索的值对象作为lat，长参数和调用“初始化”（用标记渲染地图的功能）。另外，我已经使用重新检索的lat，长变量（我们已经有了）更新了查询，而不是使用函数map检索它们.getCenter（）希望这对理解事物更有帮助。 Ps作为奖励我已经更新了plnkr示例中的代码，其中的函数用于更好的错误处理。

谷歌融合表：从用户当前位置（地理定位）查找最近的位置（从融合表中的列表）

1 个答案: