Я использую geoxml inn для анализа файла kml, содержащего количество точек. У каждого маркера есть информационное окно с некоторой информацией. Теперь я хотел бы добавить кнопку в каждое информационное окно, и при щелчке я мог бы отображать информацию в этом конкретном информационном окне в текстовом поле.

Теперь мой вопрос: как я могу добавить такую ​​кнопку, чтобы при нажатии я получал информацию об информационном окне?

Ниже приведено изображение информационного окна:

enter image description here

И это код, который я написал до сих пор:

      function initialize() {

                var mapOptions = {
                    center: new google

.maps.LatLng(35.898737028438, 14.5133403246687),
                zoom: 17,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            infowindow = new google.maps.InfoWindow({});

        }


        function displayKml() {
            initialize();

            parser = new geoXML3.parser({
                map: map,
                infoWindow: infowindow,
                singleInfoWindow: true,
                zoom: true,
                markerOptions: { optimized: false }
             });
            parser.parse("Uploads/" + document.getElementById('<%= text2.ClientID %>').value);

        }

Файл kml

<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <name>route</name>
    <Placemark>
      <name>188</name>
      <description>museum</description>
      <Point>
        <coordinates>14.5104009086433,35.8994513796904</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>196</name>
      <description>museum</description>
      <Point>
        <coordinates>14.5105859971021,35.8991906966932</coordinates>
      </Point>
    </Placemark>
    <Placemark>
      <name>349</name>
      <description>museum</description>
      <Point>
        <coordinates>14.5126379237713,35.8969782492105</coordinates>
      </Point>
    </Placemark>
  </Document>
</kml>
0
IT_info 19 Мар 2013 в 13:31
1
Geoxml3 очень гибкий, есть несколько способов сделать это, один из которых - добавить этот HTML в ваш KML (используя функцию javascript со страницы в onclick). Другой переопределяет функцию createMarker. Как выглядит ваш KML-файл? Это последнее, что вам нужно добавить (по крайней мере, в код сопоставления)? Это только для маркеров или также для ломаных линий / многоугольников?
 – 
geocodezip
19 Мар 2013 в 17:15
Да, практически это почти последняя вещь в коде отображения. Обновил вопрос файлом kml. Только для маркеров я собираюсь это сделать. @geocodezip
 – 
IT_info
19 Мар 2013 в 17:53

1 ответ

Лучший ответ

Один из способов: переопределить функцию createMarker:

function displayKml() {
    geo = new geoXML3.parser({
        map: map,
        zoom: true,
        singleInfoWindow: true,
        infoWindow: infowindow,
        createMarker: createMarker 
    });
    geo.parse(document.getElementById('kmlFile').value);
}

function createMarker(placemark, doc) {
  // create a Marker to the map from a placemark KML object

    // Load basic marker properties
    var markerOptions = {
      map: map,
      position: new google.maps.LatLng(placemark.Point.coordinates[0].lat, placemark.Point.coordinates[0].lng),
      title:    placemark.name,
      zIndex:   Math.round(placemark.Point.coordinates[0].lat * -100000)<<5,
      icon:     placemark.style.icon,
      shadow:   placemark.style.shadow 
    };

    // Create the marker on the map
    var marker = new google.maps.Marker(markerOptions);
    if (!!doc) {
      // doc.markers.push(marker);
    }

    // Set up and create the infowindow
    var infoWindowOptions = {
      content: '<div class="geoxml3_infowindow"><h3>' + placemark.name + 
               '</h3><div>' + placemark.description + '</div>'+
               '<input type="button" onclick="displayInfo(\''+placemark.name+'\',\''+placemark.description+'\');" value="populate div"></input>',
      pixelOffset: new google.maps.Size(0, 2)
    };
    infowindow.setOptions(infoWindowOptions);
    marker.infoWindowOptions = infoWindowOptions;
    marker.infoWindow = infowindow;
    // Infowindow-opening event handler
    google.maps.event.addListener(marker, 'click', function() {
      this.infoWindow.close();
      marker.infoWindow.setOptions(this.infoWindowOptions);
      this.infoWindow.open(this.map, this);
    });
    placemark.marker = marker;
    return marker;
}

Добавьте функцию для отображения данных во внешнем div:

function displayInfo(name,description){
  document.getElementById('info').innerHTML = name+"<br>"+description;
}

рабочий пример

2
geocodezip 19 Мар 2013 в 18:35
Большое спасибо, я очень признателен за вашу помощь. Работает блестяще. Спасибо за вашу помощь во всех моих сообщениях и запросах. :)
 – 
IT_info
19 Мар 2013 в 18:53
Лучшая благодарность - вернуться и принять ответы на любой из ваших предыдущих вопросов, которые помогли на этом пути (если они были полезны).
 – 
geocodezip
19 Мар 2013 в 21:04