谷歌地图圈与标签

我使用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);  geo_location != ""): ?> fontUserTypeId == 1) { ?> var fill_color_val = '#3888ff';  var fill_color_val = '#70d04f';  geo_location); ?> var latitude = ; var lontitude = ; 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

您可以在圆圈上添加带有所需标签/文字的InfoBox 。

概念certificate小提琴

代码段：

 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 }