通过绘制圆在谷歌地图上选择“自定义标记”

Select Custom Markers on Google Maps by drawing a circle

本文关键字：自定义 自定义标记 选择 绘制 谷歌地图      更新时间：2023-09-26

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

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. 创建标记时，将它们存储在对象中（使用ID作为属性名称）
    示例：

    markers = {
  1: new google.maps.Marker(/*properties*/),
  2: new google.maps.Marker(/*properties*/),
  5: new google.maps.Marker(/*properties*/)
}
  2. 当绘制了Circle时，提取圆的radius和center

  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. 将ID数组发送到服务器端脚本

注意：默认情况下不会加载geometry库，请参阅https://developers.google.com/maps/documentation/javascript/libraries

相关文章：