旧帖子
怎么能
parse和parseKmlString一起用？？我需要显示加载一个 KML 文件（我使用parse(<kml_file>)）和两个 XML 字符串（我使用parseKmlString(<xml_string>)）的地图。我如何useTheData在afterParse财产中使用？我不知道我必须如何处理这个案子。我可以只使用一个geoxml = new geoxml.parser()用于三个“层”吗？我将如何管理doc参数userTheData以获取“KML 文件层”或“XML 字符串层”？PD：对不起我的英语。很难解释我需要什么。
修改后的帖子
我用 ASP 动态地绘制地图。如果我得到 3 层，则写入 3 个对象（geoxml_1、geoxml_2 和 geoxml_3）。这将只是一个对象，并显示和隐藏第 1 层或第 2 层……这是我的问题。它确实有效，但它不是很好的代码。当我加载地图时，它会显示所有图层，并在几秒钟内只显示第一层并隐藏其他图层。我只想要第一层，当我单击地图内按钮中的其他层时，它会显示和隐藏层。这是我的代码（对不起，它太大了）：
function muestraCapasMapa(){
var objCapa = document.getElementById("capas_mapa");
var objFlecha = document.getElementById("flecha");
if (objCapa.className=="ocultar"){
objCapa.className = "";
objFlecha.className = "plegar";
}else{
objCapa.className = "ocultar";
objFlecha.className = "";
}
}
var infoWindow;
var map_1 = null;
var geoXml_1;
var bounds_1;
var blnKmlServicio_1;
var geoXml_2;
var bounds_2;
var blnKmlServicio_2;
var geoXml_3;
var bounds_3;
var blnKmlServicio_3;
var boundsTotal;
var SDLLayer;
var btnPulsado;
function useTheData_1(doc){
var geoXmlDoc = doc[0];
for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
var placemark = geoXmlDoc.placemarks[i];
var bounds_parciales;
if (placemark.polyline) {
bounds_parciales = placemark.polyline.bounds;
bounds_1.union(bounds_parciales);
}
if (placemark.polygon){
bounds_parciales = placemark.polygon.bounds;
bounds_1.union(bounds_parciales);
}
if (placemark.marker) {
bounds_parciales = placemark.marker.getPosition();
bounds_1.extend(bounds_parciales);
}
} // END FOR
} //END FUNCTION
function useTheData_2(doc){
var geoXmlDoc = doc[0];
for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
var placemark = geoXmlDoc.placemarks[i];
var bounds_parciales;
if (placemark.polyline) {
bounds_parciales = placemark.polyline.bounds;
bounds_2.union(bounds_parciales);
}
if (placemark.polygon){
bounds_parciales = placemark.polygon.bounds;
bounds_2.union(bounds_parciales);
}
if (placemark.marker) {
bounds_parciales = placemark.marker.getPosition();
bounds_2.extend(bounds_parciales);
}
} // END FOR
} //END FUNCTION
function useTheData_3(doc){
var geoXmlDoc = doc[0];
for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
var placemark = geoXmlDoc.placemarks[i];
var bounds_parciales;
if (placemark.polyline) {
bounds_parciales = placemark.polyline.bounds;
bounds_3.union(bounds_parciales);
}
if (placemark.polygon){
bounds_parciales = placemark.polygon.bounds;
bounds_3.union(bounds_parciales);
}
if (placemark.marker) {
bounds_parciales = placemark.marker.getPosition();
bounds_3.extend(bounds_parciales);
}
} // END FOR
} //END FUNCTION
function initialize_1() {
infoWindow = new google.maps.InfoWindow();
var infoWindows = [];
function closeAllInfoWindows(infoW) {
for (var i=0;i<infoWindows.length;i++) {
if (infoWindows[i] != infoW){
infoWindows[i].close();
}
}
}
boundsTotal = new google.maps.LatLngBounds();
bounds_1 = new google.maps.LatLngBounds();
bounds_2 = new google.maps.LatLngBounds();
bounds_3 = new google.maps.LatLngBounds();
//Declaramos las variables que vamos a user
var lat_1 = null;
var lng_1 = null;
var lngLatitud;
var lngLongitud;
var zoom;
zoom=9;
var latLng = new google.maps.LatLng(36.82907321372808, -4.46044921875);
//Definimos algunas opciones del mapa a crear
var myOptions = {
center: latLng, //centro del mapa
zoom: zoom,
scrollwheel: false,
styles: [{"featureType": "water","elementType": "geometry","stylers": [{ "visibility": "on"}, { "color": "#A6DBD8"}]}, {"featureType": "landscape","elementType": "geometry.fill","stylers": [{"color": "#DEDDAC"}]}, {"featureType": "poi","elementType": "geometry.fill","stylers": [{"color": "#769E72"}]}, {"featureType": "poi","elementType": "labels.text.fill","stylers": [{"color": "#7B8758"}]}, {"featureType": "poi","elementType": "labels.text.stroke","stylers": [{"color": "#EBF4A4"}]}, {"featureType": "poi.park","elementType": "geometry","stylers": [{"visibility": "simplified"}, {"color": "#CFD978"}]}, {"featureType": "road","elementType": "geometry.fill","stylers": [{"visibility": "simplified"}]}, {"featureType": "road","elementType": "labels.text.fill","stylers": [{"color": "#5B5B3F"}]}, {"featureType": "road","elementType": "labels.text.stroke","stylers": [{"color": "#ABCE83"}]}, {"featureType": "road","elementType": "labels.icon","stylers": [{"visibility": "off"}]}, {"featureType": "road.local","elementType": "geometry","stylers": [{"color": "#A4C67D"}]}, {"featureType": "road.arterial","elementType": "geometry","stylers": [{"color": "#CFCBB4"}]}, {"featureType": "road.highway","elementType": "geometry","stylers": [{"color": "#B6B6B6"}]}, {"featureType": "transit","stylers": [{"visibility": "off"}]}, {"featureType": "administrative","elementType": "geometry.stroke","stylers": [{"visibility": "on"}, {"color": "#87ae79"}]}, {"featureType": "administrative","elementType": "geometry.fill","stylers": [{"color": "#7f2200"}, {"visibility": "off"}]}, {"featureType": "administrative","elementType": "labels.text.stroke","stylers": [{"color": "#ffffff"}, {"visibility": "on"}, {"weight": 4.1}]}, {"featureType": "administrative","elementType": "labels.text.fill","stylers": [{"color": "#495421"}]}, {"featureType": "administrative.neighborhood","elementType": "labels","stylers": [{"visibility": "off"}]}],
mapTypeId: google.maps.MapTypeId.ROADMAP //tipo de mapa, carretera, híbrido,etc
}; // Fin my options
//creamos el mapa con las opciones anteriores y le pasamos el elemento div
map_1 = new google.maps.Map(document.getElementById("map_canvas_1"), myOptions);
geoXml_1 = new geoXML3.parser({
map: map_1,
infoWindowOptions: {maxWidth:350},
singleInfoWindow: true,
suppressInfoWindows: false,
afterParse: parseoTerminado_1,
zoom: false
});
function parseoTerminado_1(doc){
useTheData_1(doc);
setTimeout(function() {
compruebaCapas_1();
setTimeout(function() {
chequearCapas();
}, 0)
/*chequeo burbujas*/
$.each(geoXml_1.docs[0].gpolylines, function(index) {
infoWindows.push(geoXml_1.docs[0].gpolylines[index].infoWindow);
google.maps.event.addListener(geoXml_1.docs[0].gpolylines[index], 'click', function() {
closeAllInfoWindows(geoXml_1.docs[0].gpolylines[index].infoWindow);
});
});
$.each(geoXml_1.docs[0].markers, function(index) {
infoWindows.push(geoXml_1.docs[0].markers[index].infoWindow);
google.maps.event.addListener(geoXml_1.docs[0].markers[index], 'click', function() {
closeAllInfoWindows(geoXml_1.docs[0].markers[index].infoWindow);
});
});
//console.log(".>" + infoWindows);
/***************/
}, 500)
}
blnKmlServicio_1 = true;
geoXml_1.parse('<URL_GET_KML>');
geoXml_2 = new geoXML3.parser({
map: map_1,
infoWindowOptions: {maxWidth:350},
singleInfoWindow: true,
suppressInfoWindows: false,
afterParse: parseoTerminado_2,
zoom: false
});
function parseoTerminado_2(doc){
useTheData_2(doc);
setTimeout(function() {
compruebaCapas_2();
setTimeout(function() {
chequearCapas();
}, 0)
/*chequeo burbujas*/
$.each(geoXml_2.docs[0].gpolylines, function(index) {
infoWindows.push(geoXml_2.docs[0].gpolylines[index].infoWindow);
google.maps.event.addListener(geoXml_2.docs[0].gpolylines[index], 'click', function() {
closeAllInfoWindows(geoXml_2.docs[0].gpolylines[index].infoWindow);
});
});
$.each(geoXml_2.docs[0].markers, function(index) {
infoWindows.push(geoXml_2.docs[0].markers[index].infoWindow);
google.maps.event.addListener(geoXml_2.docs[0].markers[index], 'click', function() {
closeAllInfoWindows(geoXml_2.docs[0].markers[index].infoWindow);
});
});
//console.log(".>" + infoWindows);
/***************/
}, 500)
}
blnKmlServicio_2 = false;
geoXml_2.parseKmlString("<KML_STRING>");
geoXml_3 = new geoXML3.parser({
map: map_1,
infoWindowOptions: {maxWidth:350},
singleInfoWindow: true,
suppressInfoWindows: false,
afterParse: parseoTerminado_3,
zoom: false
});
function parseoTerminado_3(doc){
useTheData_3(doc);
setTimeout(function() {
compruebaCapas_3();
setTimeout(function() {
chequearCapas();
}, 0)
/*chequeo burbujas*/
$.each(geoXml_3.docs[0].gpolylines, function(index) {
infoWindows.push(geoXml_3.docs[0].gpolylines[index].infoWindow);
google.maps.event.addListener(geoXml_3.docs[0].gpolylines[index], 'click', function() {
closeAllInfoWindows(geoXml_3.docs[0].gpolylines[index].infoWindow);
});
});
$.each(geoXml_3.docs[0].markers, function(index) {
infoWindows.push(geoXml_3.docs[0].markers[index].infoWindow);
google.maps.event.addListener(geoXml_3.docs[0].markers[index], 'click', function() {
closeAllInfoWindows(geoXml_3.docs[0].markers[index].infoWindow);
});
});
//console.log(".>" + infoWindows);
/***************/
}, 500)
}
blnKmlServicio_3 = false;
geoXml_3.parseKmlString("<KML_STRING>");
CrearBotones(map_1);
function compruebaCapas_1(n){
if (!blnKmlServicio_1){
if (document.getElementById("Capa_1")){
if (document.getElementById("Capa_1").checked){
geoXml_1.showDocument();
boundsTotal.union(bounds_1);
}else{
geoXml_1.hideDocument();
}
}
}
}
function compruebaCapas_2(n){
if (!blnKmlServicio_2){
if (document.getElementById("Capa_2")){
if (document.getElementById("Capa_2").checked){
geoXml_2.showDocument();
boundsTotal.union(bounds_2);
}else{
geoXml_2.hideDocument();
}
}
}
}
function compruebaCapas_3(n){
if (!blnKmlServicio_3){
if (document.getElementById("Capa_3")){
if (document.getElementById("Capa_3").checked){
geoXml_3.showDocument();
boundsTotal.union(bounds_3);
}else{
geoXml_3.hideDocument();
}
}
}
}
$("a#inline").fancybox({
// RESIZE MAP WHEN TU CLICK A BUTTON
});
} //END initialize
function CrearBotones(map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
var controlDiv = document.createElement('div');
controlDiv.style.padding = '5px';
// Creamos el DIV que contendrá al botón y asignamos los estilos
var controlUI_1 = document.createElement('div');
controlUI_1.id = 'btnZoom';
controlUI_1.style.backgroundColor = 'white';
controlUI_1.style.borderStyle = 'solid';
controlUI_1.style.borderWidth = '1px 1px 0px 1px';
controlUI_1.style.borderColor = 'rgb(178, 177, 138)';
controlUI_1.style.borderRadius = '2px';
controlUI_1.style.boxShadow = '0px 2px 4px -1px rgba(0, 0, 0, 0.3)';
controlUI_1.style.marginTop = '0px';
controlUI_1.style.marginRight = '5px';
controlUI_1.style.marginBottom = '5px';
controlUI_1.style.paddingRight = '4px';
controlUI_1.style.paddingBottom = '0px';
controlUI_1.style.paddingLeft = '4px';
controlUI_1.style.cursor = 'pointer';
controlUI_1.style.textAlign = 'center';
controlUI_1.style.display = 'block';
controlUI_1.title = 'Haz click aquí para ampliar el mapa a pantalla completa';
controlDiv.appendChild(controlUI_1);
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlUI_1);
// Creamos el DIV interno que tendrá la etiqueta y HTML del botón
var controlText_1 = document.createElement('div');
controlText_1.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText_1.style.fontSize = '11px';
controlText_1.style.lineHeight = '14.5px';
controlText_1.style.paddingTop = '2px';
controlText_1.style.paddingLeft = '4px';
controlText_1.style.paddingRight = '4px';
controlText_1.innerHTML = '<a id="inline" href="#divMapaGlobal" class="icon icon-fullscreen" style="font-size:11px;text-decoration:none;"></a>';
controlUI_1.appendChild(controlText_1);
controlDiv.index=1;
// Creamos el DIV que contendrá al botón y asignamos los estilos
var controlUI_2 = document.createElement('div');
controlUI_2.id = 'btnOrtofotos';
controlUI_2.style.backgroundColor = 'white';
controlUI_2.style.borderStyle = 'solid';
controlUI_2.style.borderWidth = '1px 1px 0px 1px';
controlUI_2.style.borderColor = 'rgb(178, 177, 138)';
controlUI_2.style.borderRadius = '2px';
controlUI_2.style.boxShadow = '0px 2px 4px -1px rgba(0, 0, 0, 0.3)';
controlUI_2.style.marginTop = '5px';
controlUI_2.style.marginRight = '5px';
controlUI_2.style.marginBottom = '0px';
controlUI_2.style.marginLeft = '5px';
controlUI_2.style.paddingRight = '4px';
controlUI_2.style.paddingBottom = '0px';
controlUI_2.style.paddingLeft = '4px';
controlUI_2.style.cursor = 'pointer';
controlUI_2.style.textAlign = 'center';
controlUI_2.style.display = 'block';
controlUI_2.title = 'Haz click aquí para ver el mapa de ortofotos';
controlDiv.appendChild(controlUI_2);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlUI_2);
// Creamos el DIV interno que tendrá la etiqueta y HTML del botón
var controlText_2 = document.createElement('div');
controlText_2.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText_2.style.fontSize = '11px';
controlText_2.style.lineHeight = '14.5px';
controlText_2.style.paddingTop = '2px';
controlText_2.style.paddingLeft = '4px';
controlText_2.style.paddingRight = '4px';
controlText_2.innerHTML = 'Ortofoto';
controlUI_2.appendChild(controlText_2);
controlDiv.index=2;
//En caso de que sea el botón de Ortofotos, lanzamos el evento para mostrar el mapa
google.maps.event.addDomListener(controlUI_2, 'click', function() {
MuestraMapaOrtofotos();
});
// Creamos el DIV que contendrá al botón y asignamos los estilos
var controlUI_3 = document.createElement('div');
controlUI_3.id = 'btnCapas';
controlUI_3.style.backgroundColor = 'white';
controlUI_3.style.borderStyle = 'solid';
controlUI_3.style.borderWidth = '1px 1px 0px 1px';
controlUI_3.style.borderColor = 'rgb(178, 177, 138)';
controlUI_3.style.borderRadius = '2px';
controlUI_3.style.boxShadow = '0px 2px 4px -1px rgba(0, 0, 0, 0.3)';
controlUI_3.style.marginTop = '5px';
controlUI_3.style.marginRight = '5px';
controlUI_3.style.marginBottom = '0px';
controlUI_3.style.paddingRight = '4px';
controlUI_3.style.paddingBottom = '0px';
controlUI_3.style.paddingLeft = '4px';
controlUI_3.style.cursor = 'pointer';
controlUI_3.style.textAlign = 'center';
controlUI_3.style.display = 'block';
controlUI_3.title = 'Haz click aquí para ver los puntos de interés';
controlDiv.appendChild(controlUI_3);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlUI_3);
// Creamos el DIV interno que tendrá la etiqueta y HTML del botón
var controlText_3 = document.createElement('div');
controlText_3.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText_3.style.fontSize = '11px';
controlText_3.style.lineHeight = '14.5px';
controlText_3.style.paddingTop = '2px';
controlText_3.style.paddingLeft = '4px';
controlText_3.style.paddingRight = '12px';
controlText_3.innerHTML = '<a id="btnCapas" href="javascript:void(0);" onclick="muestraCapasMapa();">Más información<span id="flecha"></span></a><div id="capas_mapa" class="ocultar" onload="mostrarCapas();"><div><input type="checkbox" checked id="Capa_1" for="Capa_1" onclick="chequearCapas();" /><label for="Capa_1" style="background-image:url(<url_ico_layer1>)">Ruta Gran Senda</label></div><div><input type="checkbox"id="Capa_2" for="Capa_2" onclick="chequearCapas();" /><label for="Capa_2" style="background-image:url(<url_ico_layer2>)">Gran Recorrido</label></div><div><input type="checkbox"id="Capa_3" for="Capa_3" onclick="chequearCapas();" /><label for="Capa_3" style="background-image:url(<url_ico_layer3>)">Pequeño Recorrido</label></div></div>';
controlUI_3.appendChild(controlText_3);
controlDiv.index=3;
}
function chequearCapas(){
var vacio = true;
var boundsCapas = new google.maps.LatLngBounds();
geoXml_1.hideDocument();
if (document.getElementById("Capa_1")){
if (document.getElementById("Capa_1").checked){
geoXml_1.showDocument();
boundsCapas.union(bounds_1);
vacio = false;
}
else{
geoXml_1.hideDocument();
}
}else{
geoXml_1.showDocument();
}
geoXml_2.hideDocument();
if (document.getElementById("Capa_2")){
if (document.getElementById("Capa_2").checked){
geoXml_2.showDocument();
boundsCapas.union(bounds_2);
vacio = false;
}else{
geoXml_2.hideDocument();
}
}else{
geoXml_1.showDocument();
}
geoXml_3.hideDocument();
if (document.getElementById("Capa_3")){
if (document.getElementById("Capa_3").checked){
geoXml_3.showDocument();
boundsCapas.union(bounds_3);
vacio = false;
}else{
geoXml_3.hideDocument();
}
}else{
geoXml_1.showDocument();
}
if (vacio){
//Manilva: 36.376063, -5.250776
//Nerja: 36.757568, -3.872232
//Alameda: 37.208805, -4.659323
point = new google.maps.LatLng(
parseFloat(36.376063),
parseFloat(-5.250776)
);
boundsCapas.extend(point); //Añadimos puntos
point = new google.maps.LatLng(
parseFloat(36.757568),
parseFloat(-3.872232)
);
boundsCapas.extend(point); //Añadimos puntos
point = new google.maps.LatLng(
parseFloat(36.208805),
parseFloat(-4.659323)
);
boundsCapas.extend(point); //Añadimos puntos
}
if (map_1!=null){
map_1.fitBounds(boundsCapas);
}
}
PD：您可以使用initialize_1(). 太重了，希望你能更好地解释我的问题。
最终解决方案
我想我已经找到了解决问题的方法。最后我只创建了一个 geoXml 对象。我使用以下方法加载了四层parse(<url>)：
<url_layer>/location.asp
<url_layer>/rute.asp?tip=1
<url_layer>/rute.asp?tip=2
<url_layer>/rute.asp?tip=3"
如果你检查geoxml.docs.length你得到2！所以，如果我显示或隐藏layer2olayer3可能是错误的。解决方案已调用不同的 url 以获取geoxml.docs.length==4：
<url_layer>/location.asp
<url_layer>/rute1.asp
<url_layer>/rute2.asp
<url_layer>/rute3.asp