通过绘制圆圈在Google地图上选择自定义标记

时间:2014-04-29 22:45:19

标签: javascript google-maps

我正在开展一个项目,我希望能够通过在地图上绘制一个圆圈来在谷歌地图上选择我的自定义标记。应选择包含圆圈中的所有标记。以下是它的发展方向:

1. User clicks at a point on googlemaps and draws a circle.
2. The circle encompasses the custom markers.
3. All the custom markers are selected.

我需要完成这3个步骤。

需要帮助。

1 个答案:

答案 0 :(得分:2)

可能的工作流程:

  1. 创建标记时,将它们存储在对象中(使用ID作为属性名称)。
     样品:

    markers = {
      1: new google.maps.Marker(/*properties*/),
      2: new google.maps.Marker(/*properties*/),
      5: new google.maps.Marker(/*properties*/)
    }
    
  2. 在绘制Circle时获取圈子的radiuscenter
  3. 迭代markers - 属性并使用google.maps.geometry.spherical.computeDistanceBetween过滤标记。将过滤后的标记的ID存储在数组中:

     var IDs=[];
    
     for(var k in markers){
         if(google.maps.geometry.spherical
            .computeDistanceBetween(circleCenter,markers[k].getPosition())
              <=circleRadius){
            IDs.push(k);
         }
     }
    
  4. 将IDs-array发送到您的服务器端脚本.....
  5. 注意:默认情况下未加载geometry - 库,请参阅https://developers.google.com/maps/documentation/javascript/libraries