Google Map Kreis mit Label

Question

Ich erstellte Kartenansicht mit Google Map API, änderte Marker in Kreise mit google.maps.Circle Kreise Drucken auf der Karte ohne Probleme auf, aber ich kann nicht Label oder Text hinzufügen. Wie kann ich das beheben? Hier

ist der Code, den ich verwendet Kreise drucken

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

Sie können eine InfoBox mit Ihrem gewünschten Label/Text über den Kreis hinzufügen.

proof of concept fiddle

Code-Schnipsel:

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>