利用 geoxml3 显示 KML 标签

Question

我正在使用从 Google Code Project 下载的最新版本的 geoxml3。我可以在我的地图上看到 KML 文件地标。问题是我也想显示标签。在我的 KML 文件中，我分配了 Style id 和 StyleMap id。

我在这个网站上搜索了gemoxml3 label，并被指向这篇帖子label a kml file in Google Maps API v3。问题是代码项目的 wiki 指向 Google Markers，它也没有提到如何显示标签。

我还搜索了 geocodezip 网站，但也没有找到任何内容。任何方向将不胜感激。

* 添加了 KML 格式 *

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
    <name>KML Test</name>
    <StyleMap id="Tester-ICON">
        <Pair>
            <key>normal</key>
            <styleUrl>#Tester-TEMPLATE</styleUrl>
        </Pair>
        <Pair>
            <key>highlight</key>
            <styleUrl>#Tester-TEMPLATE</styleUrl>
        </Pair>
    </StyleMap>
    <Style id="Tester-TEMPLATE">
        <IconStyle>
            <scale>2</scale>
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/paddle/ylw-stars.png</href>
            </Icon>
        </IconStyle>
        <LabelStyle>
            <color>ff0000ff</color>
            <scale>2</scale>
        </LabelStyle>
        <BalloonStyle>
            <text><![CDATA[
            $[description]
            ]]>
            </text>
        </BalloonStyle>
    </Style>
<Placemark id="Event 1">
    <name>Event 1</name>
    <Snippet maxLines="0"></Snippet>
    <description>
        <![CDATA[
        <style type="text/css">
        .TDcell {
            color: Black;
            text-align: left;
        }
        .THeader {
            color: Black;
            font-weight: bold;
            white-space: nowrap;
            text-align: left;
            vertical-align: text-top;
        }
        </style>
        <p><b>Event ID:<b> 1</p>
        <p><b>Type of Event:<b> Formal Dinner</p>
        <hr>
        <table cellspacing="1" cellpadding="3" width="500">
            <tr>
                <td class="THeader">Who:</td>
                <td class="TDcell">POTUS</td>
            </tr><tr>
            <td class="THeader">What:</td>
                <td class="TDcell">State of the Union Address</td>
            </tr><tr>
                <td class="THeader">When:</td>
                <td class="TDcell">Jan, 20th 2016</td>
            </tr><tr>
                <td class="THeader">Where:</td>
                <td class="TDcell">United States Capitol</td>
            </tr><tr>
                <td class="THeader">Why:</td>
                <td class="TDcell">Updates</td>
            </tr>
        </table>]]>
    </description>
        <styleUrl>#Tester-TEMPLATE</styleUrl>
        <Point>
            <coordinates>-77.009072,38.890131,0</coordinates>
        </Point>
</Placemark>
</Document>
</kml>

Answer 1

一种选择是创建一个自定义 createMarker 函数，该函数使用 InfoBox 在标记上显示标签：

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);
    // add label
    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;";
    boxText.innerHTML = placemark.name;

    var myOptions = {
      content: boxText
      ,disableAutoPan: false
      ,maxWidth: 0
      ,pixelOffset: new google.maps.Size(-40, -60)
      ,zIndex: null
      ,boxStyle: {
        textAlign: "center"
        ,fontSize: "8pt"
        ,width: "80px"
       }
      ,closeBoxURL: ""
      ,infoBoxClearance: new google.maps.Size(1, 1)
      ,isHidden: false
      ,pane: "floatPane"
      ,enableEventPropagation: false
    };

    var ib = new InfoBox(myOptions);
    ib.open(map, 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;
}

像这样在geoxml3 中使用它：

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

• proof of concept (with posted KML)
• proof of concept (with a different KML)

代码 sn-p：

var map, infowindow;

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

  var googlemaps_options = {
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    streetViewControl: false
  }

  map = new google.maps.Map(document.getElementById('map_canvas'), googlemaps_options);

  var geo = new geoXML3.parser({
    map: map,
    zoom: true,
    singleInfoWindow: true,
    infoWindow: infowindow,
    createMarker: createMarker
  });
  geo.parseKmlString(kmlStr);
}

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);
  // add label
  var boxText = document.createElement("div");
  boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;";
  boxText.innerHTML = placemark.name;

  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-40, -60),
    zIndex: null,
    boxStyle: {
      textAlign: "center",
      fontSize: "8pt",
      width: "80px"
    },
    closeBoxURL: "",
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };

  var ib = new InfoBox(myOptions);
  ib.open(map, 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;
}

function displayInfo(name, description) {
  document.getElementById('info').innerHTML = name + "<br>" + description;
}
google.maps.event.addDomListener(window, 'load', initialize);
var kmlStr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Document><name>KML Test</name><StyleMap id="Tester-ICON"><Pair><key>normal</key><styleUrl>#Tester-TEMPLATE</styleUrl></Pair><Pair><key>highlight</key><styleUrl>#Tester-TEMPLATE</styleUrl></Pair></StyleMap><Style id="Tester-TEMPLATE"><IconStyle><scale>2</scale><Icon><href>http://maps.google.com/mapfiles/kml/paddle/ylw-stars.png</href></Icon></IconStyle><LabelStyle><color>ff0000ff</color><scale>2</scale></LabelStyle><BalloonStyle><text><![CDATA[$[description]]]></text></BalloonStyle></Style><Placemark id="Event 1"><name>Event 1</name><Snippet maxLines="0"></Snippet><description><![CDATA[<style type="text/css">.TDcell {color: Black;text-align: left;}.THeader {color: Black;font-weight: bold;white-space: nowrap;text-align: left;vertical-align: text-top;}</style><p><b>Event ID:<b>1</p><p><b>Type of Event:<b>Formal Dinner</p><hr><table cellspacing="1" cellpadding="3" width="500"><tr><td class="THeader">Who:</td><td class="TDcell">POTUS</td></tr><tr><td class="THeader">What:</td><td class="TDcell">State of the Union Address</td></tr><tr><td class="THeader">When:</td><td class="TDcell">Jan, 20th 2016</td></tr><tr><td class="THeader">Where:</td><td class="TDcell">United States Capitol</td></tr><tr><td class="THeader">Why:</td><td class="TDcell">Updates</td></tr></table>]]></description><styleUrl>#Tester-TEMPLATE</styleUrl><Point><coordinates>-77.009072,38.890131,0</coordinates></Point></Placemark></Document></kml>';

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#map_canvas {
  height: 90%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>