Question

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

我在此网站上搜索了StyleMap，并指出了这篇文章label a kml file in Google Maps API v3。问题是代码项目的维基指向Google Markers，但没有提到如何显示标签。

我还搜索了geocodezip网站，但他们也找不到任何东西。任何方向都将不胜感激。

*添加了KML格式*

gemoxml3 label

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

代码段

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>

利用geoxml3显示KML标签

1 个答案: