在谷歌地图上画圆时如何知道半径答案

【问题标题】：How to know radius while drawing a circle on Google Maps在谷歌地图上画圆时如何知道半径
【发布时间】：2017-12-16 00:50:12
【问题描述】：

我有什么：

根据 Google 的建议，我们使用 MVC 对象和事件 DistanceWidget 和 RadiusWidget 来显示半径，同时重新调整对现有圆（由 DistanceWidget 绘制的圆）正常工作的圆的大小。

Fiddle Demo

我需要什么：

我需要在绘制新圆时显示圆的半径。事件DistanceWidget & RadiusWidget 仅用于现有圆（由DistanceWidget 绘制的圆）而不用于新圆（用户使用DrawingManager 工具绘制的圆）。

是否可以显示 DistanceWidget 来创建新的圈子？

Fiddle

【问题讨论】：

不能有任何距离控件或半径控件，需要选择一个区域。绘图管理器仅在circlecomplete 事件之前创建图形图像，此时将实例化选定区域（圆）对象。那时你可以分析它的半径/距离，即使它们随着听众的变化而变化。
不推荐使用 [circle] 标签（参见其标签 wiki）。请不要使用。

标签： javascript google-maps google-maps-api-3 geometry

【解决方案1】：

确实是一个不错的挑战。正如@DaveAlperovich 评论的那样，您不能使用DrawingManager 来检索这条信息；绘图时，您无权访问圆圈；您必须等待DrawingManager 触发circlecomplete 事件才能获得对该圈子的引用。

尽管如此，如果你不能拥有真正的经理，只是假装。请参阅下面的 sn-p 和说明。

var FakeDrawer = function(controlDiv, map) {
  var self = this;

  /* Initialization, some styling ... */
  self._map = map;
  self.initControls(controlDiv);

  /* Setup the click event listener: drawingmode for the circle control */
  google.maps.event.addDomListener(self._controls.circle, 'click', function() {
    /* Ensure consistency */
    self.reset();

    /* Bind the drawing mode */
    self._map.setOptions({
      draggableCursor: "crosshair"
    });
    self._drawListener = self._map.addListener('mousedown', self.drawingMode(self));
  });

  /* Just reset things for the stop controls */
  google.maps.event.addDomListener(self._controls.stop, 'click', function() {
    self.reset();
  });
};

FakeDrawer.prototype.drawingMode = function(self) {
  return function(center) {
    /* Let's freeze the map during drawing */
    self._map.setOptions({
      draggable: false
    });

    /* Create a new circle which will be manually scaled */
    var circle = new google.maps.Circle({
      fillColor: '#000',
      fillOpacity: 0.3,
      strokeWeight: 2,
      clickable: false,
      editable: false,
      map: self._map,
      radius: 1,
      center: center.latLng,
      zIndex: 1
    });

    /* Update the radius on each mouse move */
    var onMouseMove = self._map.addListener('mousemove', function(border) {
      var radius = 1000 * self.distanceBetweenPoints(center.latLng, border.latLng);
      circle.setRadius(radius);

      /* Here is the feature, know the radius while drawing */
      google.maps.event.trigger(self, 'drawing_radius_changed', circle);
    });

    /* The user has finished its drawing */
    google.maps.event.addListenerOnce(self._map, 'mouseup', function() {
      /* Remove all listeners as they are no more required */
      google.maps.event.removeListener(onMouseMove);

      circle.setEditable(true);

      /* Restore some options to keep a consistent behavior */
      self.reset();

      /* Notify listener with the final circle */
      google.maps.event.trigger(self, 'circlecomplete', circle);
    });
  };
};

FakeDrawer.prototype.reset = function() {
  var self = this;

  self._map.setOptions({
    draggableCursor: "",
    draggable: "true"
  });

  /* Remove any applied listener */
  if (self._drawListener) {
    google.maps.event.removeListener(self._drawListener);
  }
};

/* Create views and associated css */
FakeDrawer.prototype.initControls = function(controlDiv) {
  var self = this;

  function createControlUI(title, image) {
    var controlUI = document.createElement('div');
    controlUI.style.backgroundColor = '#fff';
    controlUI.style.border = '1px solid rgba(0, 0, 0, .15)';
    controlUI.style.boxShadow = '1 4px -1px rgba(0, 0, 0, .3)';
    controlUI.style.marginTop = '10px';
    controlUI.style.textAlign = 'center';
    controlUI.style.width = '25px';
    controlUI.style.height = '25px';
    controlUI.style.display = 'inline-block';
    controlUI.title = title;
    if (image == "circle") {
      controlUI.style.borderLeft = "none";
    }

    var controlImgWrapper = document.createElement('div');
    controlImgWrapper.style.width = '16px';
    controlImgWrapper.style.height = '16px';
    controlImgWrapper.style.overflow = 'hidden';
    controlImgWrapper.style.display = 'inline-block';
    controlImgWrapper.style.marginTop = '4px';
    controlUI.appendChild(controlImgWrapper);

    var imageOffset = {
      "circle": 0,
      "openhand": -9 * 16
    }[image];

    var controlImg = document.createElement('img');
    controlImg.src = 'https://maps.gstatic.com/mapfiles/drawing.png';
    controlImg.style.marginTop = imageOffset + "px";
    controlImgWrapper.appendChild(controlImg);

    var focusBackground = function() {
      controlUI.style.backgroundColor = '#eee';
    };

    var unfocusBackground = function() {
      controlUI.style.backgroundColor = "#fff";
    };

    controlImg.addEventListener('mouseenter', focusBackground);
    controlImg.addEventListener('mouseout', unfocusBackground);
    controlUI.addEventListener('mouseenter', focusBackground);
    controlUI.addEventListener('mouseout', unfocusBackground);

    return controlUI;
  }

  self._controls = {
    circle: createControlUI("Draw a circle", "circle"),
    stop: createControlUI("Stop drawing", "openhand"),
  };

  controlDiv.appendChild(self._controls.stop);
  controlDiv.appendChild(self._controls.circle);
};

FakeDrawer.prototype.distanceBetweenPoints = function(p1, p2) {
  if (!p1 || !p2) {
    return 0;
  }
  var R = 6371;
  var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
  var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  var d = R * c;
  return d;
};





function InitializeMap() {
  var latlng = new google.maps.LatLng(29.760193, -95.36939);
  var myOptions = {
    zoom: 12,
    center: latlng,
    zoomControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);

  /* Add a custom control */
  var fakeDrawerDiv = document.createElement('div');
  var fakeDrawer = new FakeDrawer(fakeDrawerDiv, map);

  fakeDrawerDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(fakeDrawerDiv);


  var updateInfo = function(circle) {
    document.getElementById("info").innerHTML = "Radius: " + circle.getRadius();
  };

  google.maps.event.addListener(fakeDrawer, 'drawing_radius_changed', updateInfo);
  google.maps.event.addListener(fakeDrawer, 'circlecomplete', function(circle) {
    google.maps.event.addListener(circle, 'radius_changed', function() {
      updateInfo(circle);
    });
  });
}


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

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#map {
  height: 80%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=drawing&ext=.js"></script>
<div id="map"></div>
<div id="info"></div>

第 1 步：创建自定义控件

文件中的某处或作为外部库：

var FakeDrawer = function (controlDiv, map) {
    var self = this;

    /* Initialization, some styling ... */
    self._map = map;
    self.initControls(controlDiv);
};

FakeDrawer.prototype.initControls(controlDiv) {
    var self = this;

    function createControlUI (title, image) {
        var controlUI = document.createElement('div');
        /* ... See the snippet for details .. just some styling */
        return controlUI;
    }

    self._controls = {
        circle: createControlUI("Draw a circle", "circle"),
        stop: createControlUI("Stop drawing", "openhand"),
     };

     controlDiv.appendChild(self._controls.stop);
     controlDiv.appendChild(self._controls.circle);
};

第 2 步：添加一些糖

这是我们可能使用的功能；深受您的 JsFiddle 启发 :)

需要时恢复一致状态的重置方法：

FakeDrawer.prototype.reset = function () {
    var self = this;
    self._map.setOptions({
        draggableCursor: "",
        draggable: "true"
    });

    /* Remove any applied listener */
    if (self._drawListener) { google.maps.event.removeListener(self._drawListener) ; }
};

还有一台远程计算机：

FakeDrawer.prototype.distanceBetweenPoints = function (p1, p2) {
    if (!p1 || !p2) {
        return 0;
    }
    var R = 6371;
    var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
    var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c;
    return d;
};

第 3 步：创建自己的绘图模式

现在我们有了一些控件，我们必须定义它们的行为。 stop 控件很简单；让我们看看circle 控件。

FakeDrawer.prototype.drawingMode = function (self) {
    return function (center) {
        /* Let's freeze the map during drawing */
        self._map.setOptions({draggable: false});

        /* Create a new circle which will be manually scaled */
        var circle = new google.maps.Circle({
            fillColor: '#000',
            fillOpacity: 0.3,
            strokeWeight: 2,
            clickable: false,
            editable: false,
            map: self._map,
            radius: 1,
            center: center.latLng,
            zIndex: 1
        });

        /* Update the radius on each mouse move */
        var onMouseMove = self._map.addListener('mousemove', function (border) {
            var radius = 1000 * self.distanceBetweenPoints(center.latLng, border.latLng);
            circle.setRadius(radius);

            /* Here is the feature, know the radius while drawing */
            google.maps.event.trigger(self, 'drawing_radius_changed', circle);
        });

        /* The user has finished its drawing */
        google.maps.event.addListenerOnce(self._map, 'mouseup', function () {
            /* Remove all listeners as they are no more required */
            google.maps.event.removeListener(onMouseMove);

            circle.setEditable(true);

            /* Restore some options to keep a consistent behavior */
            self.reset();

            /* Notify listener with the final circle */
            google.maps.event.trigger(self, 'circlecomplete', circle);
        });
    };
};

第四步：绑定控件

现在一切正常，让我们在初始版本的构造函数中添加一些侦听器，以便每个控件在单击时都有相应的操作。

var FakeDrawer = function (controlDiv, map) {
    var self = this;

    /* Initialization, some styling ... */
    self._map = map;
    self.initControls(controlDiv);

    /* Setup the click event listeners: drawingmode */
    google.maps.event.addDomListener(self._controls.circle, 'click', function() {
        /* Ensure consistency */
        self.reset();

        /* Only drawingmode */
        self._map.setOptions({draggableCursor: "crosshair"});
        self._drawListener = self._map.addListener('mousedown', self.drawingMode(self));
    });

    google.maps.event.addDomListener(self._controls.stop, 'click', function () {
        self.reset();
    });
};

第 5 步：使用它！

假设您的地图已正确初始化。

在你的地图初始化函数中：

var fakeDrawerDiv = document.createElement('div');
var fakeDrawer = new FakeDrawer(fakeDrawerDiv, map);

fakeDrawerDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(fakeDrawerDiv);

var updateInfo = function (circle) {
    document.getElementById("info").innerHTML = "Radius: " + circle.getRadius();
};

google.maps.event.addListener(fakeDrawer, 'drawing_radius_changed', updateInfo);
google.maps.event.addListener(fakeDrawer, 'circlecomplete', function (circle) {
    google.maps.event.addListener(circle, 'radius_changed', function () {
        updateInfo(circle);
    });
});

享受，希望对你有帮助。

【讨论】：

感谢您的回答。真的很好..我有两个疑问。 1. 我可以在上面安装 CircleComplete 和 MouseOver 监听器吗？ 2. 我可以在上面安装多边形工具吗？它的行为会像相同的绘图管理器工具吗？
嘿！ 1/ 当前模块从circlecomplete 返回一个google.maps.Circle 对象；您可以在其上绑定事件。看我回答的最后一部分。 2/ 您可以将经典的DrawingManager 与多边形功能集成（可以在经理的选项中设置）。我们需要对 css 进行一些修复，以使整个事情变得漂亮。 3/ 与第 1 点相呼应。