Я работаю над проектом, который связан с созданием карты с API-интерфейсом google. Это карта Франции и ее регионов. Я создал таблицу слияния, которую вы видите here. я реализовал эту карту на моем тестовом сайте, но у меня есть вопрос, я хотел бы создать эффект при наведении на регионы, и для этого мне нужно хранить pylygons в переменной, чтобы использовать это:Эффект наведения на таблицу слияния google map
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({fillOpacity: 1});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({fillOpacity: 0.3});
});
As предложенный в этом примере кода с помощью документации API Google here, вы можете это сделать, но я не понимаю, как реализовать мою таблицу fusion в этом коде. Как я понимаю
var query = 'SELECT name, kml_4326 FROM ' +
'1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
где kml_4326 это имя таблицы фьюжн и 1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ моя таблица фьюжн ID, но то, что я не понимаю, это:
url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
также, наконец, var geometries = rows[i][1]['geometries']; где ['geometries'] является colomn, содержащий координаты каждой области, в моем случае это «геометрия».
Вот мой текущий код:
<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: я добавил событие на курсор, находящийся слое, но он по-прежнему не работает
Если кто-то имеет представление о этот вопрос я действительно apreciate помощь :)
Какие проблемы вы с реализации пример с вашим столом? Можете ли вы опубликовать свою версию этого кода? – geocodezip
Я отредактировал мой код, как сказал автор Hai Nguyen. Я добавил событие на слой, который может работать для меня, но ничего не произошло. – Tonani