【问题标题】:Count and output number of markers bound by circle radius计算并输出以圆半径为界的标记数
【发布时间】:2013-07-26 01:35:20
【问题描述】:

我有一张地图,上面填充了融合表中的地点标记。我正在获取用户的位置并显示距离他们位置 10 英里的圆。这是我的代码 - http://connormccarra.com/sandbox/map/。如何使用 api 计算圆圈所包围的标记数量并在页脚中输出该数字?

干杯!

相关代码:

var map;
function Initialize() {
    var MapOptions = {
        zoom: 7,
        center: new google.maps.LatLng(53.4125694, -8.245014),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        sensor: true
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), MapOptions);

      var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'Address',
      from: '1OPU6utSjRYwJSFK-EXdaGmt2KgLTq2loVIjS3AA'
    }
  });
    layer.setMap(map);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var marker = new google.maps.Marker({
        map: map,
        position: pos,
        content: 'You are here!'
      });

      // Add circle overlay and bind to marker
var circle = new google.maps.Circle({
  map: map,
  radius: 16093,    // 10 miles in metres
  fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

var count = mgr.getMarkerCount(circle);
        document.getElementById("Address").innerHTML += count + "<BR>";

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

    //Maps API loaded, now load customizations

    var element = document.createElement('script');
    element.src = 'template.js';
    element.type = 'text/javascript';
    var scripts = document.getElementsByTagName('script')[0];
    scripts.parentNode.insertBefore(element, scripts);
}

【问题讨论】:

  • 请贴出相关代码

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


【解决方案1】:

我建议你先获取 FusionTablesLayer 的所有坐标。 这是一个在侧边栏中使用的示例

http://www.geocodezip.com/v3_FusionTables_AfricaMap_kml_sidebar.html

然后使用循环语句可以使用 computeDistanceBetween 函数。

Detect If Marker is Within Circle Overlay

【讨论】:

    【解决方案2】:

    由 FusionTableLayer 创建的标记不是真正的标记,无法将它们作为一种列表来过滤它们(您无法获取标记的任何详细信息,除非您单击它们)。

    但您可以请求带有空间条件的 FusionTableAPI(通过 AJAX,支持 jsonp)。

    查询的语法:

    SELECT COUNT() from tableId 
      WHERE ST_INTERSECTS('Address',CIRCLE(LATLNG(lat,lng),10000))
    

    如何发送查询:https://developers.google.com/fusiontables/docs/v1/sql-reference

    演示(使用另一个 FusionTable 的数据,因为您的表受到保护):
    http://jsfiddle.net/doktormolle/bAtgf/

    【讨论】:

    • 真的吗?它应该是公开的,这是链接 - google.com/fusiontables/…。你从哪里得到'table ='键?谢谢,这正是我想要的!
    • 我从您的链接地图的来源获得了您的表的 tableId(但它不适用于该表,错误 403:禁止)。小提琴中使用的表格只是演示它的一些表格。
    【解决方案3】:

    最简单的方法:使用geometry librarycomputeDistanceBetween方法。如果与用户位置的距离小于 10 英里,则标记位于圆圈中。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-04-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-07-28
      • 1970-01-01
      相关资源
      最近更新 更多