google 地图融合的悬停效果 table
Hover effect on google map fusion table
我正在从事一个项目，该项目涉及使用 google 地图 API 创建地图。
这是一张法国及其地区的地图。我创建了一个融合 table，您可以看到 here。
我在我的测试站点上实现了这张地图，但我有一个问题，我想在区域上创建一个悬停效果，为此我需要将 pylygons 存储在一个变量中以使用它：
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 1});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0.3});
});
正如 google API 文档 here 在此示例代码中所建议的，您可以这样做，但我不明白如何在 table 中实现我的融合这个代码。
据我了解
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
其中 kml_4326 是融合的名称 table 而 1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ 是我的 table 融合 ID 但我不明白的是：
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
最后 var geometries = rows[i][1]['geometries']; 其中 ['geometries'] 是包含每个区域坐标的列，在我的例子中是 'geometry'.
这是我当前的代码：
<html>
<head>
<title></title>
<style>
#map-canvas{width: 800px; height:600px;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialise() {
/*Markers coordinates*/
var center = new google.maps.LatLng(46.9,1.8);
/*end markers coordinates*/
//var myLatlng = new google.maps.LatLng(47.456751,-0.488409); // Add the coordinates
var mapOptions = {
zoom: 6, // The initial zoom level when your map loads (0-20)
minZoom: 5, // Minimum zoom level allowed (0-20)
maxZoom: 8, // Maximum soom level allowed (0-20)
zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
zoomControlOptions: {
style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
},
center: center, // Centre the Map to our coordinates variable
//mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
// All of the below are set to true by default, so simply remove if set to true:
panControl:false, // Set to false to disable
mapTypeControl:false, // Disable Map/Satellite switch
scaleControl:false, // Set to false to hide scale
streetViewControl:false, // Set to disable to hide street view
overviewMapControl:false, // Set to false to remove overview control
rotateControl:false // Set to false to disable rotate control
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow({disableAutoPan: true});
var location = {};
/*hide world*/
var style = [{
featureType: 'all',
elementType: 'all',
stylers: [
{ "visibility": "simplified" },
{ "color": "#f2f2f2" }
]
},];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
/*end hide world*/
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "geometry",
from: "1i9RSWkvXnjhKWploEY2pqr0q5eahLE4g9y5Egi84"
},
styles: [{
polygonOptions: {
fillOpacity: '0.7',
}
}],
options : {suppressInfoWindows:true},/*disable info window*/
clickable:false,/*disable click*/
map: map,
styleId: 2,
templateId: 2,
});
//Set event for layer
google.maps.event.addListener(layer_0, 'mouseover', function(e) {
console.log('ok');
});
google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); // Keeps the Pin Central when resizing the browser on responsive sites
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
编辑 12/01/2014 : 我在图层上添加了鼠标悬停事件，但它仍然不起作用
如果有人对此事有任何见解，我将不胜感激:)
您应该为图层设置事件
//Set event for layer
google.maps.event.addListener(layer_0, 'click', function(e) {
alert('hello world');
return false;
});
FusionTablesLayers 不支持 mouseover/mouseout 事件。您需要使用 the example you reference 中的代码创建原生 Google 地图 Javascript API v3 多边形并向其添加 mouseover/mouseout 标记。
工作代码片段，使用您的 table:
// from
function kmlToRgb(kmlColor){
rr = kmlColor.substr(7, 2);
gg = kmlColor.substr(5, 2);
bb = kmlColor.substr(3, 2);
return "#"+rr+gg+bb;
}
var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00','#00FFFF','#FF00FF',
'#800000', '#008000', '#000080', '#808000','#008080','#800080',
'#80FF00', '#0080FF', '#FF0080', '#FF8000','#00FF80','#8000FF'];
var map;
function initialise() {
/*Markers coordinates*/
var center = new google.maps.LatLng(46.9, 1.8);
/*end markers coordinates*/
//var myLatlng = new google.maps.LatLng(47.456751,-0.488409); // Add the coordinates
var mapOptions = {
zoom: 6, // The initial zoom level when your map loads (0-20)
minZoom: 5, // Minimum zoom level allowed (0-20)
maxZoom: 8, // Maximum soom level allowed (0-20)
zoomControl: true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
},
center: center, // Centre the Map to our coordinates variable
//mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
// All of the below are set to true by default, so simply remove if set to true:
panControl: false, // Set to false to disable
mapTypeControl: false, // Disable Map/Satellite switch
scaleControl: false, // Set to false to hide scale
streetViewControl: false, // Set to disable to hide street view
overviewMapControl: false, // Set to false to remove overview control
rotateControl: false // Set to false to disable rotate control
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow({
disableAutoPan: true
});
var location = {};
/*hide world*/
var style = [{
featureType: 'all',
elementType: 'all',
stylers: [{
"visibility": "simplified"
}, {
"color": "#f2f2f2"
}]
}];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
/*end hide world*/
/*
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "geometry",
from: "1i9RSWkvXnjhKWploEY2pqr0q5eahLE4g9y5Egi84"
},
styles: [{
polygonOptions: {
fillOpacity: '0.7',
}
}],
options: {
suppressInfoWindows: true
},
clickable: false,
map: map,
styleId: 2,
templateId: 2,
});
*/
// 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, background FROM ' +
'1i9RSWkvXnjhKWploEY2pqr0q5eahLE4g9y5Egi84';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
google.maps.event.addDomListener(window, 'resize', function () {
map.setCenter(map.getCenter());
}); // Keeps the Pin Central when resizing the browser on responsive sites
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
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() * 18);
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: kmlToRgb(rows[i][2]), // colors[randomnumber], // rows[i][2],
strokeOpacity: 0,
strokeWeight: 1,
fillColor: kmlToRgb(rows[i][2]),
fillOpacity: 0.3
});
google.maps.event.addListener(country, 'mouseover', function () {
this.setOptions({
fillOpacity: 1
});
});
google.maps.event.addListener(country, 'mouseout', function () {
this.setOptions({
fillOpacity: 0.3
});
});
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;
}
html,body,#map-canvas{width: 100%; height:100%;}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
我正在从事一个项目，该项目涉及使用 google 地图 API 创建地图。 这是一张法国及其地区的地图。我创建了一个融合 table，您可以看到 here。 我在我的测试站点上实现了这张地图，但我有一个问题，我想在区域上创建一个悬停效果，为此我需要将 pylygons 存储在一个变量中以使用它：
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 1});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0.3});
});
正如 google API 文档 here 在此示例代码中所建议的，您可以这样做，但我不明白如何在 table 中实现我的融合这个代码。 据我了解
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
其中 kml_4326 是融合的名称 table 而 1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ 是我的 table 融合 ID 但我不明白的是：
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
最后 var geometries = rows[i][1]['geometries']; 其中 ['geometries'] 是包含每个区域坐标的列，在我的例子中是 'geometry'.
这是我当前的代码：
<html>
<head>
<title></title>
<style>
#map-canvas{width: 800px; height:600px;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialise() {
/*Markers coordinates*/
var center = new google.maps.LatLng(46.9,1.8);
/*end markers coordinates*/
//var myLatlng = new google.maps.LatLng(47.456751,-0.488409); // Add the coordinates
var mapOptions = {
zoom: 6, // The initial zoom level when your map loads (0-20)
minZoom: 5, // Minimum zoom level allowed (0-20)
maxZoom: 8, // Maximum soom level allowed (0-20)
zoomControl:true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
zoomControlOptions: {
style:google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
},
center: center, // Centre the Map to our coordinates variable
//mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
// All of the below are set to true by default, so simply remove if set to true:
panControl:false, // Set to false to disable
mapTypeControl:false, // Disable Map/Satellite switch
scaleControl:false, // Set to false to hide scale
streetViewControl:false, // Set to disable to hide street view
overviewMapControl:false, // Set to false to remove overview control
rotateControl:false // Set to false to disable rotate control
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow({disableAutoPan: true});
var location = {};
/*hide world*/
var style = [{
featureType: 'all',
elementType: 'all',
stylers: [
{ "visibility": "simplified" },
{ "color": "#f2f2f2" }
]
},];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
/*end hide world*/
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "geometry",
from: "1i9RSWkvXnjhKWploEY2pqr0q5eahLE4g9y5Egi84"
},
styles: [{
polygonOptions: {
fillOpacity: '0.7',
}
}],
options : {suppressInfoWindows:true},/*disable info window*/
clickable:false,/*disable click*/
map: map,
styleId: 2,
templateId: 2,
});
//Set event for layer
google.maps.event.addListener(layer_0, 'mouseover', function(e) {
console.log('ok');
});
google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); // Keeps the Pin Central when resizing the browser on responsive sites
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
编辑 12/01/2014 : 我在图层上添加了鼠标悬停事件，但它仍然不起作用
如果有人对此事有任何见解，我将不胜感激:)
您应该为图层设置事件
//Set event for layer
google.maps.event.addListener(layer_0, 'click', function(e) {
alert('hello world');
return false;
});
FusionTablesLayers 不支持 mouseover/mouseout 事件。您需要使用 the example you reference 中的代码创建原生 Google 地图 Javascript API v3 多边形并向其添加 mouseover/mouseout 标记。
工作代码片段，使用您的 table:
// from
function kmlToRgb(kmlColor){
rr = kmlColor.substr(7, 2);
gg = kmlColor.substr(5, 2);
bb = kmlColor.substr(3, 2);
return "#"+rr+gg+bb;
}
var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00','#00FFFF','#FF00FF',
'#800000', '#008000', '#000080', '#808000','#008080','#800080',
'#80FF00', '#0080FF', '#FF0080', '#FF8000','#00FF80','#8000FF'];
var map;
function initialise() {
/*Markers coordinates*/
var center = new google.maps.LatLng(46.9, 1.8);
/*end markers coordinates*/
//var myLatlng = new google.maps.LatLng(47.456751,-0.488409); // Add the coordinates
var mapOptions = {
zoom: 6, // The initial zoom level when your map loads (0-20)
minZoom: 5, // Minimum zoom level allowed (0-20)
maxZoom: 8, // Maximum soom level allowed (0-20)
zoomControl: true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
},
center: center, // Centre the Map to our coordinates variable
//mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
// All of the below are set to true by default, so simply remove if set to true:
panControl: false, // Set to false to disable
mapTypeControl: false, // Disable Map/Satellite switch
scaleControl: false, // Set to false to hide scale
streetViewControl: false, // Set to disable to hide street view
overviewMapControl: false, // Set to false to remove overview control
rotateControl: false // Set to false to disable rotate control
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow({
disableAutoPan: true
});
var location = {};
/*hide world*/
var style = [{
featureType: 'all',
elementType: 'all',
stylers: [{
"visibility": "simplified"
}, {
"color": "#f2f2f2"
}]
}];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
/*end hide world*/
/*
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "geometry",
from: "1i9RSWkvXnjhKWploEY2pqr0q5eahLE4g9y5Egi84"
},
styles: [{
polygonOptions: {
fillOpacity: '0.7',
}
}],
options: {
suppressInfoWindows: true
},
clickable: false,
map: map,
styleId: 2,
templateId: 2,
});
*/
// 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, background FROM ' +
'1i9RSWkvXnjhKWploEY2pqr0q5eahLE4g9y5Egi84';
var encodedQuery = encodeURIComponent(query);
url.push(encodedQuery);
url.push('&callback=drawMap');
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
script.src = url.join('');
var body = document.getElementsByTagName('body')[0];
body.appendChild(script);
}
google.maps.event.addDomListener(window, 'resize', function () {
map.setCenter(map.getCenter());
}); // Keeps the Pin Central when resizing the browser on responsive sites
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
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() * 18);
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: kmlToRgb(rows[i][2]), // colors[randomnumber], // rows[i][2],
strokeOpacity: 0,
strokeWeight: 1,
fillColor: kmlToRgb(rows[i][2]),
fillOpacity: 0.3
});
google.maps.event.addListener(country, 'mouseover', function () {
this.setOptions({
fillOpacity: 1
});
});
google.maps.event.addListener(country, 'mouseout', function () {
this.setOptions({
fillOpacity: 0.3
});
});
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;
}
html,body,#map-canvas{width: 100%; height:100%;}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>