我正在使用鼠标悬停自定义连接到Fusion Table的地图。一切正常但我需要在鼠标悬停{1}}上进行高亮显示。这可能与我目前的代码/工作流程或我需要尝试别的吗？
以下是我的HTML源代码，此处为like this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Fusion Tables Layer Mouse Over</title>
<style>
body {
font-family: Arial, sans-serif;
}
#map_canvas {
height: 500px;
width: 100% px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<!-- visualization API will be used to query fusion table if loaded here, otherwise use the fusion query jsoncallback
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {});
</script>
-->
<script type="text/javascript" src="fusiontips.js">
</script>
<script type="text/javascript" id="script">
var map, layer;
var googleApiKey = "AIzaSyA3FQFrNr5W2OEVmuENqhb2MBB2JabdaOY";
function loadPoly() {
if (layer != null) {
layer.setMap(null);
google.maps.event.clearInstanceListeners(layer);
}
//NOTE: you must use the encrypted tableid
var tableid = '1-PzLkgpSpOEuRlCp7T-wuypEmi11BnDL3MPvNezV';
layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: tableid
},
styles: [{
polygonOptions: {
fillColor: '#00FF00',
fillOpacity: 0.3
}}],
map: map
});
layer.enableMapTips({
select: "'name','Awami League','BNP'", // list of columns to query, typially need only one column.
from: tableid, // fusion table name
geometryColumn: 'geometry', // geometry column name
suppressMapTips: false, // optional, whether to show map tips. default false
delay: 20, // milliseconds mouse pause before send a server query. default 300.
tolerance: 1, // tolerance in pixel around mouse. default is 6.
googleApiKey: googleApiKey
});
map.setCenter(new google.maps.LatLng(24, 90));
map.setZoom(7);
addListeners();
}
function addListeners() {
google.maps.event.addListener(layer, 'mouseover', function(fEvent) {
var row = fEvent.row;
myHtml = 'Election Info:<br/>';
for (var x in row) {
if (row.hasOwnProperty(x)) {
myHtml += '<b>' + x + "</b>:" + row[x].value + "<br/>";
}
}
document.getElementById('info').innerHTML = myHtml;
});
google.maps.event.addListener(layer, 'mouseout', function(fevt) {
document.getElementById('info').innerHTML = '';
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng( 24, 90),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
loadPoly();
}
</script>
</head>
<body onload="initialize();">
<div>
Move mouse over a fusion table feature and pause a while
</div>
<div>
Select an sample fusion table:
<input type="radio" name="ft" checked onclick="loadPoint()">Point
<input type='radio' name="ft" onclick="loadLine()">Line
<input type='radio' name="ft" onclick="loadPoly()">Polygon
</div>
<div id="map_canvas">
</div>
<div id="info">
</div>
</body>
</html>
答案 0 :(得分：1)
如果我修改my example以使用您的表名和列名it works for me。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Fusion Tables Layer Example: Mouseover Map Styles</title>
<style type="text/css">
#map-canvas {
height: 500px;
width: 600px;
}
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
var map;
//NOTE: you must use the encrypted tableid
var tableid = '1-PzLkgpSpOEuRlCp7T-wuypEmi11BnDL3MPvNezV';
//NOTE: you must use your own API key authorized for your domain(s).
var googleApiKey = 'AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ';
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(10, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById('map-canvas'),
myOptions);
geocoder.geocode({address: "Bangladesh"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
else alert("geocoded result did not include viewport");
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
// Initialize JSONP request
var script = document.createElement('script');
var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
url.push('sql=');
var query = "SELECT name, geometry, 'Awami_League', BNP FROM " +
tableid;
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key='+googleApiKey);
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
function createPolygon(country,id)
{
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 1});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0.3});
});
google.maps.event.addListener(country, 'click', function() {
document.getElementById('content-window').innerHTML = id;
});
}
// "Invalid query: Column `Awami League' does not exist"
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var id = rows[i][0];
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var randomnumber = Math.floor(Math.random() * 4);
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: colors[randomnumber],
strokeOpacity: 0,
strokeWeight: 1,
fillColor: colors[randomnumber],
fillOpacity: 0.3
});
createPolygon(country,id);
country.setMap(map);
}
}
}
function constructNewCoordinates(polygon) {
var newCoordinates = [];
var coordinates = polygon['coordinates'][0];
for (var i in coordinates) {
newCoordinates.push(
new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
}
return newCoordinates;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="content-window"></div>
</script>
</body>
</html>