将按钮添加到infoWindow

Question

我正在使用geoxml客栈来解析包含点数的kml文件。每个标记都有一个包含一些信息的信息窗口。现在我想要在每个信息窗口中添加一个按钮，并且可以在文本框中显示该特定信息窗口中的信息。

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

下面是一个信息窗口的图像：

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

 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> 

Answer 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; 
} 

working example