1

我是这里的新手，想就这个问题寻求帮助。我有一个代码，应该映射并列出离用户当前位置最近的 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);

它仅设法放大用户当前位置，但没有映射和列出最近的诊所。那么我该如何让它发挥作用呢？提前致谢。

4

1 回答 1

3

如果地理位置正确，您已经拥有变量 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 = 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 等...... onload 事件）搞砸了。如果你看一下我的例子，你会看到我在最后一行调用“locate”（获取位置的函数），并在最后一行使用 onload 事件，然后“locate”传递从该位置检索到的值对象作为 lat, long 参数并调用“initialize”（用于使用标记渲染地图的函数）。此外，我已经使用检索的 lat、long 变量（我们已经有这些变量）更新了查询，而不是使用函数 map 检索它们.getCenter() 希望这对理解事物有更多帮助。

于 2013-07-04T21:08:16.393 回答