我正在尝试使用 GoogleAPI 向圈子添加文本。 我做了以下事情:-
<!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>
但这不起作用。谁能帮我解决这个问题。 对于每个圆圈，我必须添加不同的文本 尝试使用 Google Maps API 读取 csv 并在 Google map 上表示数据
最佳答案
您的代码出现一些错误和逻辑问题，也请尝试实现此操作:并确保您已添加 infobox.js 文件。这应该会显示 label每个圆圈。
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 = 'https://cdn.rawgit.com/agershun/alasql/version-0.0.36/examples/csv/demo.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: populationOptions.center,
closeBoxURL: "",
isHidden: false,
enableEventPropagation: true
};
var label = new InfoBox(myOptions);
label.open(map);
google.maps.event.addListener(cityCircle, 'center_changed', function () {
label.setPosition(cityCircle.getCenter());
});
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map-canvas" style="width: 100%; height: 400px"></div>关于javascript - 在 Google map API 中向圈子添加文本不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27884724/