0

ポイント数を含むkmlファイルを解析するためにgeoxmlインを使用しています。各マーカーには、いくつかの情報を含む情報ウィンドウがあります。ここで、各情報ウィンドウにボタンを追加してクリックすると、その特定の情報ウィンドウの情報をテキストボックスに表示できるようになります。

今私の質問は、クリックすると情報ウィンドウの情報を取得するようなボタンをどのように追加できるかということです。

以下は、情報ウィンドウの画像です。

ここに画像の説明を入力してください

そして、これは私がこれまでに行ったコードです：

      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

One way: Override the createMarker function:

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

Add a function to display the data in an external div:

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

working example

于 2013-03-19T14:35:48.560 に答える