谷歌地图圈与标签 [英] Google map circle with label

问题描述

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

I created map view using google map api, changed markers into circles by using google.maps.Circle circles printing on map with no issues on that but I can't add label or text into it. How can I fix that.

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

Here is the code I used to print circles

   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);

推荐答案

您可以添加 InfoBox ，在圆圈上显示您想要的标签/文字。

You can add an InfoBox with your desired label/text over the 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);
  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"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map"></div>

这篇关于谷歌地图圈与标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！