0

我正在使用 geoxml inn 来解析包含点数的 kml 文件。每个标记都有一个包含一些信息的信息窗口。现在我想要为每个信息窗口添加一个按钮，然后单击我将能够在文本框中显示该特定信息窗口中的信息。

现在我的问题是我怎样才能添加这样的按钮，点击我会得到信息窗口的信息？

以下是信息窗口的图像：

在此处输入图像描述

这是我到目前为止所做的代码：

      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>
4

1 回答 1

2

一种方法：覆盖 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;
}

工作示例

于 2013-03-19T14:35:48.560 回答