Javascript 在谷歌地图API中向圆圈添加文本无效
我正在尝试使用GoogleAPI向圆圈添加文本。 我做了以下工作:-Javascript 在谷歌地图API中向圆圈添加文本无效,javascript,google-maps,google-maps-api-3,google-api,Javascript,Google Maps,Google Maps Api 3,Google Api,我正在尝试使用GoogleAPI向圆圈添加文本。 我做了以下工作:- <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Pol
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>PoliceMonitor</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function csvToJS(csv) {
var resp=[];
var rows = csv.split('\n');
for(var i=0;i<rows.length;i++){
var row=rows[i].split(',');
row[0]=row[0].trim();
resp[i]=row;
console.log(resp);
}
return resp;
}
var citymap;
var req = new XMLHttpRequest();
var file = "http://localhost:8080/rahul/data.csv";
req.open('GET', file, true);
req.send();
req.onreadystatechange = function() {
if (req.status == 200) {
var csv = req.responseText;
var data = csvToJS(csv);
citymap = data;
}
initialize();
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom : 5,
center : new google.maps.LatLng(37.09024, -95.712891),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var loop = 0;
for (i = 0; i < citymap.length; i++) {
var populationOptions = {
strokeColor : '#000000',
strokeOpacity : 0.8,
strokeWeight : 2,
fillOpacity : 0.35,
map : map,
center : new google.maps.LatLng(citymap[i][1], citymap[i][2]),
//radius : Math.sqrt(citymap[i][3]) * 20000
radius : citymap[i][3] * 9000
};
cityCircle = new google.maps.Circle(populationOptions);
loop = loop + 1;
}
var labelText = '<div style="color: #FFF">Text goes here</div>';
var myOptions = {
content: labelText,
boxStyle: {
background: '#000',
border: "1px solid black",
textAlign: "center",
fontSize: "8pt",
width: "90px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-45, 0),
position: centerPosition,
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true
};
var label = new InfoBox(myOptions);
label.open(map);
google.maps.event.addListener(circle, 'center_changed', function () {
label.setPosition(circle.getCenter());
});
}
</script>
</head>
<body>
<p>From all the links retrieved using Google API , only the unique links were counted and represented on the map </p>
<div id="map-canvas" ></div>
</body>
</html>
警察监督员
html,正文,#地图画布{
身高:100%;
边际:0px;
填充:0px
}
功能csvToJS(csv){
var resp=[];
var rows=csv.split('\n');
对于(var i=0;i您的代码出现了一些错误和逻辑问题,也可以尝试实现这一点:还要确保您已经添加了infobox.js
文件。这应该显示每个圆圈的标签
功能csvToJS(csv){
var resp=[];
var rows=csv.split('\n');
对于(var i=0;i