-1
Okay, also hier ist das Ding. Ich versuche dieses Problem seit den letzten Tagen zu lösen, bin aber nicht in der Lage, eine richtige Lösung zu finden! Wenn jemand helfen könnte, wäre das eine große Hilfe!Geomap Marker mit Breiten- und Längengrad - regionClick, und Einstellung Marker Größe und Farbe
Das Problem ist-
ich vor kurzem arbeiten begann am geomap und ich konnte die Markierungen auf der Weltkarte plotten mit Breiten- und Längen (als here gezeigt). Aber nach, dass ich nicht in der Lage die folgenden Dinge-
- Gruppe der Farbe des Markers für bestimmte Werte zu tun.
- fügen Sie alle Ereignis, wenn eine Markierung geklickt wird (ich auf Google Site bezeichnet und SO Fragen)
I viele verschiedene SO Fragen gesehen haben aber keiner hilft mir, eine Lösung zu bekommen!
Unten ist der Code meiner index.html -
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type='text/javascript' src='http://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['geomap']});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Latitude', 'Longitude','Value','Location'],
[23.0225, 72.5714, 10, 'Ahmedabad'],
[41.8781, -87.6298, 8, 'Chicago'],
[41.3851, 2.1734, 6, 'Barcelona'],
[7.9465, -1.0232, 7, 'Ghana'],
[22.5726, 88.3639, 3, 'Kolkata'],
[16.4314, 103.5059, 1, 'Kalasin Province'],
[25.930414, 50.637772, 2, 'Bahrain'],
[-25.274398, 133.775136, 6, 'Australia'],
[56.130366, -106.346771, 6, 'Canada'],
[-35.675147, -71.542969, 9, 'Chile'],
[51.165691, 10.451526, 10, 'Germany'],
[36.204824, 138.252924, 4, 'Japan']
]);
var options = {
region: 'world',
dataMode: 'markers',
displayMode: 'markers',
colorAxis: { minValue: 1, maxValue: 10, colors: ['red', 'yellow', 'green']}, // I'm bit confused if here maxValue should be 10 or 3
sizeAxis: { minValue: 0, maxValue: 3, minSize: 1, maxSize: 4},
width: 1300,
height: 600,
showZoomOut: true,
enableRegionInteractivity: true,
magnifyingGlass: {enable: true, zoomFactor: 7.5},
zoomOutLabel: 'zoomOut'
};
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
// select event
google.visualization.events.addListener(geomap, 'select', regionClick);
// another event
google.visualization.events.addListener(geomap, 'showzoomout', zoomOut);
function zoomOut (e){
alert('a random alert');
}
geomap.draw(data, options);
};
// I had initially placed below function code inside drawMap(), as told in a SO question, but that too didn't help
function regionClick() {
alert('random alert');
var selection = geomap.getSelection();
var message = '';
for (var i=0; i<selection.length; i++) {
var item = selection[i];
if (item.row != null && item.column != null) {
var str = data.getFormattedValue(item.row, item.column);
message += '{ row:' + item.row + ', column:' + item.column + '} = ' + str + '\n';
}
else if (item.row != null) {
var str = data.getFormattedValue(item.row , 0);
message += '{ row:' + item.row + ', column: null }; value = ' + str + '\n';
}
else if (item.column != null) {
var str = data.getFormattedValue(0 , item.column);
message += '{ row: null, column: ' + item.column + ' }; value = ' + str + '\n';
}
}
if (message == '') {
message = 'nothing';
}
alert('You selected: ' + message);
}
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
Bitte, jede Art von Hilfe sehr geschätzt werden würde!