Kreisdiagramm auf Google-Karte
Ich möchte ein Kreisdiagramm an mehreren Orten in einer Google Map zeichnen. Gibt es eine Möglichkeit, ein Google-Kreisdiagramm an einem bestimmten Ort in einer Google-Karte zu zeichnen, um einen Datensatz darzustellen (z. B. die Bevölkerung an einem bestimmten Ort / in einer bestimmten Stadt)?
Ich habe eine Lösung gefunden und unten wird der Code angezeigt, den ich geschrieben habe, um ein Tortendiagrammsymbol an einer bestimmten Stelle anzuzeigen. Ich habe eine andere Anforderung, dem Pi-Diagramm-Symbol einen Ereignis-Listener hinzuzufügen, um ein Fenster mit einem detaillierteren Kreisdiagramm anzuzeigen. Ich habe den folgenden Code als Lösung für diese Anforderungen gefunden, aber er zeigt das Fenster nicht an, wenn auf das Symbol geklickt wird. Können Sie uns bitte helfen, das Problem hier zu finden?
<html>
<head>
<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
<script src="https://maps.googleapis.com/maps/api/js?v=3.10&sensor=false&.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
google.load( 'visualization', '1', { packages:['corechart'] });
function drawChart(marker, data) {
var options = {'title':'Perception Analysis '+
marker.getPosition().toString(),
'width':400,
'height':150};
var node = document.createElement('div'),
infoWindow = new google.maps.InfoWindow(),
chart = new google.visualization.PieChart(node);
chart.draw(data, options);
infoWindow.setContent(node);
infoWindow.open(marker.getMap(),marker);
}
function ChartMarker( options ) {
this.setValues( options );
this.$inner = $('<div>').css({
position: 'relative',
left: '-50%', top: '-50%',
width: options.width,
height: options.height,
fontSize: '1px',
lineHeight: '1px',
padding: '2px',
backgroundColor: 'transparent',
cursor: 'default'
});
this.$div = $('<div>')
.append( this.$inner )
.css({
position: 'absolute',
display: 'none'
});
};
ChartMarker.prototype = new google.maps.OverlayView;
ChartMarker.prototype.onAdd = function() {
$( this.getPanes().overlayMouseTarget ).append( this.$div );
};
ChartMarker.prototype.onRemove = function() {
this.$div.remove();
};
ChartMarker.prototype.draw = function() {
var marker = this;
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel( this.get('position') );
this.$div.css({
left: position.x,
top: position.y,
display: 'block'
})
this.$inner
.html( '<img src="' + this.get('image') + '"/>' )
.click( function( event ) {
var events = marker.get('events');
events && events.click( event );
});
this.chart = new google.visualization.PieChart( this.$inner[0] );
this.chart.draw( this.get('chartData'), this.get('chartOptions') );
};
function initialize() {
var latLng = new google.maps.LatLng( 40.708762, -74.006731 );
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var data = google.visualization.arrayToDataTable([
[ 'Task', 'Hours per Day' ],
[ 'Work', 11 ],
[ 'Eat', 2 ],
[ 'Commute', 2 ],
[ 'Watch TV', 2 ],
[ 'Sleep', 7 ]
]);
var options = {
fontSize: 8,
backgroundColor: 'transparent',
legend: {position: 'none'}
};
var marker = new ChartMarker({
map: map,
position: latLng,
width: '250px',
height: '100px',
chartData: data,
chartOptions: options,
events: {
click: function( event ) {
drawChart(this,data)
}
}
});
};
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 900px; height: 500px;"></div>
</body>
</html>