带有标签的谷歌地图圈

Question

我使用 google map api 创建了地图视图，通过使用 google.maps.Circle 在地图上打印的圆圈将标记更改为圆圈，没有任何问题，但我无法向其中添加标签或文本。我该如何解决。

这是我用来打印圆圈的代码

   function initialize() {

        var frrlanser_marker = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            radius: 60 * 100
        };



        var latlng = new google.maps.LatLng(6.951974, 80.720160);
        var myOptions = {
            scrollwheel: false,
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"),
            myOptions);

<?php foreach($results as $val): ?>
<?php if($val->geo_location != ""): ?>

      <?php if($val->fontUserTypeId == 1) { ?>
        var fill_color_val = '#3888ff';
      <?php } else { ?>
        var fill_color_val = '#70d04f';
     <?php  } ?>




   <?php $LatLng = explode(",", $val->geo_location); ?>

    var latitude = <?php echo $LatLng[0]; ?>;
    var lontitude = <?php echo $LatLng[1]; ?>;

    var myLatLng = {lat: latitude, lng: lontitude};

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map
    });

       // Add circle overlay and bind to marker
        var circle = new google.maps.Circle({
            map: map,
            radius: 3200,    // 10 miles in metres
            fillColor: fill_color_val,
            strokeColor: '#FFFFFF',
            strokeWeight: 2,
            fillOpacity: 1,
        });
        circle.bindTo('center', marker, 'position');

        marker.setVisible(false);

    }

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

Answer 1

您可以在圆圈上添加带有所需标签/文本的信息框。

概念证明小提琴

代码片段：

function initialize() {

  var frrlanser_marker = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    radius: 60 * 100
  };

  var latlng = new google.maps.LatLng(6.951974, 80.720160);
  var myOptions = {
    scrollwheel: false,
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"),
    myOptions);
  var fill_color_val = '#3888ff';

  var latitude = 6.951974;
  var lontitude = 80.720160;

  var myLatLng = google.maps.LatLng(latitude, lontitude);

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });

  // Add circle overlay and bind to marker
  var circle = new google.maps.Circle({
    map: map,
    radius: 3200, // 10 miles in metres
    fillColor: fill_color_val,
    strokeColor: '#FFFFFF',
    strokeWeight: 2,
    fillOpacity: 1,
  });
  circle.bindTo('center', marker, 'position');

  marker.setVisible(false);

  var labelText = "1";
  var myOptions = {
    content: labelText,
    boxStyle: {
      border: "none",
      textAlign: "center",
      fontSize: "10pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, -5),
    position: latlng,
    closeBoxURL: "",
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: true
  };

  var ibLabel = new InfoBox(myOptions);
  ibLabel.open(map);

}

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

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-infobox@2.0.0/infobox-module.min.js"></script>
<div id="map"></div>