Tengo un mapa de google polígono archivo kml que yo soy de carga en un mapa de google. Cuando hago clic en el polígono, se me dibuja una línea desde ese polígono a los lugares en el mapa. Para ello estoy utilizando el código:
//Add KML layer
var fregLayer = new G.KmlLayer(
'http://dl.dropbox.com/freg4.kml',
{ suppressInfoWindows: true,
map: map
});
// Add listener to kml layer
google.maps.event.addListener(fregLayer, 'click', function(kmlEvent) {
//parse click event
var text = kmlEvent.featureData.name;
//make polylines using my function 'make'
make(text);
});
Sin embargo, después de hacer clic en un polígono de la capa kml pierde 'focus' y ya no puedo clic en cualquiera de los otros polígonos para generar otras líneas. Leyendo acerca de este problema, se sugiere hacer la polilínea no se puede hacer clic que he intentado utilizar clickable:false en las opciones. También probé google.maps.kmlEvent.stopPropagation();
sin embargo ninguna de estas opciones, se solucionó el problema.
## Programa Completo ##
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style>
html,body {
margin: 0px;
width: 100%;
height: 100%;
}
</style>
<title>Connectivity</title>
<!-- External js -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- Local js -->
<script src="http://dl.dropbox.com/u/169746/latlong.js"></script>
<script type="text/javascript">
var G = google.maps; // Shortened
var zoom = 9;
var centerPoint = getCoordinates(5);
var container;
var sliderValue = 100;
var map;
var markersArray = [];
var line = [];
// Read coordinates from Lat/Long *.js file
function getCoordinates(x){
var LatLng = new google.maps.LatLng(identifier[x][2], identifier[x][1]);
return LatLng;
}
// relate click events to polygons
function attachMessage(marker, number) {
google.maps.event.addListener(marker, 'click', function(){ make(number) } );
}
//makes connections from the chosen polygon, to all other polygons
function make(index){
// clear all other overlays and delete
clearOverlays()
deleteOverlays()
// loop through array index
for (var i = 0; i < connections[index].length; i++) {
makeConnections(index, i, i, connections[index][i]);
}
}
//makes a connection between two polygons
function makeConnections(a,b,lineIndex, opacity){
// get points
var points = [
getCoordinates(a),
getCoordinates(b)
]
opacity = Math.log(opacity)/18
//make line
line[lineIndex] = new google.maps.Polyline({
path: points,
map: map,
strokeColor: "#FF0000",
strokeWeight: 1,
strokeOpacity:opacity
});
}
// Removes the polylines from the map
function clearOverlays() {
for (i in line) {
line[i].setMap(null);
}
}
// Shows any overlays currently in the array
function showOverlays(){
for (i in line) {
line[i].setMap(map);
}
}
// Delete all overlays
function deleteOverlays() {
if (line) {
for (i in line) {
line[i].setMap(null);
}
line.length = 0;
}
}
function load() {
container = document.getElementById('mapDiv');
var myOptions = {
zoom: zoom,
center: centerPoint,
mapTypeId: G.MapTypeId.ROADMAP
}
map = new G.Map(container, myOptions);
//Add KML layer
var fregLayer = new G.KmlLayer(
'http://dl.dropbox.com/u/169746/freg4.kml',
{ suppressInfoWindows: true,
map: map
});
// Add listener to kml layer
G.event.addListener(fregLayer, 'click', function(kmlEvent) {
//clearOverlays()
var text = kmlEvent.featureData.name;
//get index of string
text = 'X' + text
var index = ID.indexOf(text);
//Pass index to function to make links
make(index);
//G.kmlEvent.stopPropagation();
//alert(G.kmlEvent.getCurrentTarget());
});
}
window.onload = load;
</script>
</head>
<body >
<center>
<table cellspacing="0" cellpadding="2">
<tr>
<td valign="top">
<div id="top" style="width: 800px; height: 30px;"></div>
</td>
</tr>
<tr>
<td valign="top">
<div id="mapDiv" style="width: 800px; height: 450px;"></div>
</td>
</tr>
</table>
</center>
</body>
</html>
