GeoJSON es una norma común para el intercambio de datos geoespaciales en Internet. es ligero y fácilmente legible, por lo que es ideal para compartir y colaborar. con la capa de datos, puede agregar datos GeoJSON a un mapa de google en una sola línea de código.
Acontinuación un ejemplo, el html completo:
<!DOCTYPE html> <html> <head> <title>Data Layer: Event Handling</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } #info-box { background-color: white; border: 1px solid black; bottom: 30px; height: 20px; padding: 10px; position: absolute; left: 30px; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> <script> var map, opened, infowindow, marker, myLatlng = new google.maps.LatLng(-23.576 , 133.883); var stuffToDo = { 'click': function(event) { opened = true; stuffToDo['on'](event); infowindow.setContent(event.feature.getProperty("leyend")); infowindow.setPosition(event.latLng); infowindow.open(map); }, 'on': function(event){ !opened ? function(){ map.data.overrideStyle(event.feature, { strokeWeight: 2, fillOpacity: 0.8, }); document.getElementById('info-box').textContent = event.feature.getProperty('letter'); }() : null }, 'off': function(event){ !opened ? map.data.revertStyle() : null }, 'closeclick': function(event){ map.data.revertStyle(); opened = false; } }; function initialize() { map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 4, center: myLatlng }); infowindow = new google.maps.InfoWindow(); // Load GeoJSON. map.data.loadGeoJson('assets/google.json'); // Add some style. map.data.setStyle(function(feature) { return /** @type {google.maps.Data.StyleOptions} */({ clickable: true, fillColor: feature.getProperty('color'), // esta propiedad se obtiene de la carga del geoJson visible: true, zIndex: 1, cursor: 'pointer', strokeWeight: 1.5, strokeOpacity: 1, strokeColor: feature.getProperty('color'), fillOpacity: 0.4, }); }); // [START snippet] // Set mouseover event for each feature. map.data.addListener('click', stuffToDo['click']); map.data.addListener('mouseover', stuffToDo['on']); map.data.addListener('mouseout', stuffToDo['off']); google.maps.event.addListener(infowindow,'closeclick', stuffToDo['closeclick']); // [END snippet] } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> <div id="info-box">?</div> </body> </html>
Comentarios
Publicar un comentario