如何在 Google 地图中设置可编辑圆圈控件的样式

Question

有谁知道一种简单的方法来为 Google 地图中的可编辑圆圈设置用户控件（半径边界上的白点）样式？我在 API 文档中找不到执行此操作的任何方法。至少，将点放在比我的 pin 更低的 zindex 上会很棒，但修改两者的 zindex 选项没有结果。

Answer 1

一种选择是执行类似“文章”中的此示例的操作：Google Maps Javascript API v3文档中的MVC的乐趣/那里的手柄只是标记，到中心的距离必然是半径，中心标记绑定到圆的中心。

小提琴示例

function init() { 
  var mapDiv = document.getElementById('map-canvas'); 
  var map = new google.maps.Map(mapDiv, { 
        center: new google.maps.LatLng(37.790234970864, -122.39031314844), 
        zoom: 8, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 
  var distanceWidget = new DistanceWidget(map);
  google.maps.event.addListener(distanceWidget, 'distance_changed', function() { 
   displayInfo(distanceWidget); 
  }); 

  google.maps.event.addListener(distanceWidget, 'position_changed', function() { 
    displayInfo(distanceWidget); 
  });
} 

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

修改了DistanceWidget代码（更改了标记图标）：

  /** 
   * A distance widget that will display a circle that can be resized and will 
   * provide the radius in km. 
   * 
   * @param {google.maps.Map} map The map on which to attach the distance widget. 
   * 
   * @constructor 
   */
  function DistanceWidget(map) {
      this.set('map', map);
      this.set('position', map.getCenter());

      var marker = new google.maps.Marker({
          draggable: true,
          icon: {
              url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
              size: new google.maps.Size(7, 7),
              anchor: new google.maps.Point(4, 4)
          },
          title: 'Move me!'
      });

      // Bind the marker map property to the DistanceWidget map property 
      marker.bindTo('map', this);

      // Bind the marker position property to the DistanceWidget position 
      // property 
      marker.bindTo('position', this);

      // Create a new radius widget 
      var radiusWidget = new RadiusWidget();

      // Bind the radiusWidget map to the DistanceWidget map 
      radiusWidget.bindTo('map', this);

      // Bind the radiusWidget center to the DistanceWidget position 
      radiusWidget.bindTo('center', this, 'position');

      // Bind to the radiusWidgets' distance property 
      this.bindTo('distance', radiusWidget);

      // Bind to the radiusWidgets' bounds property 
      this.bindTo('bounds', radiusWidget);
  }
  DistanceWidget.prototype = new google.maps.MVCObject();

  /** 
   * A radius widget that add a circle to a map and centers on a marker. 
   * 
   * @constructor 
   */
  function RadiusWidget() {
      var circle = new google.maps.Circle({
          strokeWeight: 2
      });

      // Set the distance property value, default to 50km. 
      this.set('distance', 50);

      // Bind the RadiusWidget bounds property to the circle bounds property. 
      this.bindTo('bounds', circle);

      // Bind the circle center to the RadiusWidget center property 
      circle.bindTo('center', this);

      // Bind the circle map to the RadiusWidget map 
      circle.bindTo('map', this);

      // Bind the circle radius property to the RadiusWidget radius property 
      circle.bindTo('radius', this);

      this.addSizer_();
  }
  RadiusWidget.prototype = new google.maps.MVCObject();


  /** 
   * Update the radius when the distance has changed. 
   */
  RadiusWidget.prototype.distance_changed = function () {
      this.set('radius', this.get('distance') * 1000);
  };
  /** 
   * Add the sizer marker to the map. 
   * 
   * @private 
   */
  RadiusWidget.prototype.addSizer_ = function () {
      var sizer = new google.maps.Marker({
          draggable: true,
          icon: {
              url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
              size: new google.maps.Size(7, 7),
              anchor: new google.maps.Point(4, 4)
          },
          title: 'Drag me!'
      });

      sizer.bindTo('map', this);
      sizer.bindTo('position', this, 'sizer_position');

      var me = this;
      google.maps.event.addListener(sizer, 'drag', function () {
          // Set the circle distance (radius) 
          me.setDistance();
      });
  };

  /** 
   * Update the center of the circle and position the sizer back on the line. 
   * 
   * Position is bound to the DistanceWidget so this is expected to change when 
   * the position of the distance widget is changed. 
   */
  RadiusWidget.prototype.center_changed = function () {
      var bounds = this.get('bounds');

      // Bounds might not always be set so check that it exists first. 
      if (bounds) {
          var lng = bounds.getNorthEast().lng();

          // Put the sizer at center, right on the circle. 
          var position = new google.maps.LatLng(this.get('center').lat(), lng);
          this.set('sizer_position', position);
      }
  };

  /** 
   * Calculates the distance between two latlng locations in km. 
   * @see http://www.movable-type.co.uk/scripts/latlong.html 
   * 
   * @param {google.maps.LatLng} p1 The first lat lng point. 
   * @param {google.maps.LatLng} p2 The second lat lng point. 
   * @return {number} The distance between the two points in km. 
   * @private 
   */
  RadiusWidget.prototype.distanceBetweenPoints_ = function (p1, p2) {
      if (!p1 || !p2) {
          return 0;
      }

      var R = 6371; // Radius of the Earth in km 
      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;
  };


  /** 
   * Set the distance of the circle based on the position of the sizer. 
   */
  RadiusWidget.prototype.setDistance = function () {
      // As the sizer is being dragged, its position changes.  Because the 
      // RadiusWidget's sizer_position is bound to the sizer's position, it will 
      // change as well. 
      var pos = this.get('sizer_position');
      var center = this.get('center');
      var distance = this.distanceBetweenPoints_(center, pos);

      // Set the distance property for any objects that are bound to it 
      this.set('distance', distance);
  };

  function displayInfo(widget) {
      var info = document.getElementById('info');
      info.innerHTML = 'Position: ' + widget.get('position').toUrlValue(3) + ', distance: ' + widget.get('distance').toFixed(3);
  }

代码片段：

function init() {
  var mapDiv = document.getElementById('map-canvas');
  var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.790234970864, -122.39031314844),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var distanceWidget = new DistanceWidget(map);
  google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
    displayInfo(distanceWidget);
  });

  google.maps.event.addListener(distanceWidget, 'position_changed', function() {
    displayInfo(distanceWidget);
  });
}

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

/** 
 * A distance widget that will display a circle that can be resized and will
 * provide the radius in km.
 *
 * @param {google.maps.Map} map The map on which to attach the distance widget.
 *
 * @constructor
 */
function DistanceWidget(map) {
  this.set('map', map);
  this.set('position', map.getCenter());

  var marker = new google.maps.Marker({
    draggable: true,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    },
    title: 'Move me!'
  });

  // Bind the marker map property to the DistanceWidget map property 
  marker.bindTo('map', this);

  // Bind the marker position property to the DistanceWidget position 
  // property 
  marker.bindTo('position', this);

  // Create a new radius widget 
  var radiusWidget = new RadiusWidget();

  // Bind the radiusWidget map to the DistanceWidget map 
  radiusWidget.bindTo('map', this);

  // Bind the radiusWidget center to the DistanceWidget position 
  radiusWidget.bindTo('center', this, 'position');

  // Bind to the radiusWidgets' distance property 
  this.bindTo('distance', radiusWidget);

  // Bind to the radiusWidgets' bounds property 
  this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();

/** 
 * A radius widget that add a circle to a map and centers on a marker.
 *
 * @constructor
 */
function RadiusWidget() {
  var circle = new google.maps.Circle({
    strokeWeight: 2
  });

  // Set the distance property value, default to 50km. 
  this.set('distance', 50);

  // Bind the RadiusWidget bounds property to the circle bounds property. 
  this.bindTo('bounds', circle);

  // Bind the circle center to the RadiusWidget center property 
  circle.bindTo('center', this);

  // Bind the circle map to the RadiusWidget map 
  circle.bindTo('map', this);

  // Bind the circle radius property to the RadiusWidget radius property 
  circle.bindTo('radius', this);

  this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();


/** 
 * Update the radius when the distance has changed.
 */
RadiusWidget.prototype.distance_changed = function() {
  this.set('radius', this.get('distance') * 1000);
};
/** 
 * Add the sizer marker to the map.
 *
 * @private
 */
RadiusWidget.prototype.addSizer_ = function() {
  var sizer = new google.maps.Marker({
    draggable: true,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    },
    title: 'Drag me!'
  });

  sizer.bindTo('map', this);
  sizer.bindTo('position', this, 'sizer_position');

  var me = this;
  google.maps.event.addListener(sizer, 'drag', function() {
    // Set the circle distance (radius) 
    me.setDistance();
  });
};

/** 
 * Update the center of the circle and position the sizer back on the line.
 *
 * Position is bound to the DistanceWidget so this is expected to change when
 * the position of the distance widget is changed.
 */
RadiusWidget.prototype.center_changed = function() {
  var bounds = this.get('bounds');

  // Bounds might not always be set so check that it exists first. 
  if (bounds) {
    var lng = bounds.getNorthEast().lng();

    // Put the sizer at center, right on the circle. 
    var position = new google.maps.LatLng(this.get('center').lat(), lng);
    this.set('sizer_position', position);
  }
};

/** 
 * Calculates the distance between two latlng locations in km.
 * @see http://www.movable-type.co.uk/scripts/latlong.html
 *
 * @param {google.maps.LatLng} p1 The first lat lng point.
 * @param {google.maps.LatLng} p2 The second lat lng point.
 * @return {number} The distance between the two points in km.
 * @private
 */
RadiusWidget.prototype.distanceBetweenPoints_ = function(p1, p2) {
  if (!p1 || !p2) {
    return 0;
  }

  var R = 6371; // Radius of the Earth in km 
  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;
};


/** 
 * Set the distance of the circle based on the position of the sizer.
 */
RadiusWidget.prototype.setDistance = function() {
  // As the sizer is being dragged, its position changes.  Because the 
  // RadiusWidget's sizer_position is bound to the sizer's position, it will 
  // change as well. 
  var pos = this.get('sizer_position');
  var center = this.get('center');
  var distance = this.distanceBetweenPoints_(center, pos);

  // Set the distance property for any objects that are bound to it 
  this.set('distance', distance);
};

function displayInfo(widget) {
  var info = document.getElementById('info');
  info.innerHTML = 'Position: ' + widget.get('position').toUrlValue(3) + ', distance: ' + widget.get('distance').toFixed(3);
}

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

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="info"></div>
<div id="map-canvas"></div>

Answer 2

恐怕你不能。 API 不提供对这些句柄的控制，并且由于圆圈位于画布内，因此没有简单的方法来识别元素以设置其样式。

编辑：

您可以将圈子声明为不可编辑，并且仅允许在鼠标悬停时进行编辑。

var circle=new google.maps.Circle({ 
    center: map.getCenter(),
    map: map,
    editable: false
});

google.maps.event.addListener(circle, 'mouseover', function () {
    circle.set('editable',true);
});

google.maps.event.addListener(circle, 'mouseout', function () {
    circle.set('editable',false);
}); 

Answer 3

向编辑指针添加样式的一种简单方法如下。

#map div[style^="position: absolute; left: 0px; top: 0px; width: 9px; height: 9px;"] {
    border-color: #777575 !important;
    border-width: 2px !important;
}