Question

我已经厌倦了创建kml文件并将其加载到谷歌地图中。使用javascript和html。我得到了这个，但我无法将标记列表显示为侧边栏。

现在我试着这样做。这是我的xml：

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>Darwill sample kml file</name>
<description>Create sample kml file</description>
<Style id="downArrowIcon">
  <IconStyle>
    <Icon>
      <href>http://maps.google.com/mapfiles/kml/pal3/icon21.png</href>
      <color>4365b5</color>
    </Icon>
  </IconStyle>
</Style>
<Style id="downArrowIcon1">
  <IconStyle>
    <color>CEF3D8</color>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
    </Icon>
  </IconStyle>
</Style>
<Style id="downArrowIcon2">
  <IconStyle>
    <color>DBB177</color>
    <Icon>
      <href>http://maps.google.com/mapfiles/kml/pal4/icon28.png</href>
    </Icon>
  </IconStyle>
</Style>

<Placemark>
  <name>Simple Placemark</name>
  <description>
    <![CDATA[
      <h2>Description of simple placemark</h2>
      <a href="http://www.phponwebsites.com">Click</a>
    ]]>
  </description>
  <styleUrl>#downArrowIcon</styleUrl>
  <Point>
    <coordinates>10.082680,70.270718,0</coordinates>
  </Point>
</Placemark>
<Placemark>
  <name>Floating Placemark</name>
  <description>
    <![CDATA[
      <h2>Description of floating placemark</h2>
      <p>This is the floating placemark</p>
      <a href="http://www.phponwebsites.com">Click</a>
    ]]>
  </description>
  <LookAt>
    <longitude>13.082680</longitude>
    <latitude>80.270718</latitude>
    <altitude>0</altitude>
    <heading>20</heading>
    <tilt>45</tilt>
    <range>250</range>
  </LookAt>
  <styleUrl>#downArrowIcon1</styleUrl>
  <Point>
    <altitudeMode>relativeToGround</altitudeMode>
    <coordinates>13.082680,80.270718,0</coordinates>
  </Point>
</Placemark>
<Placemark>
  <name>Extruded Placemark</name>
  <description>
    <![CDATA[
      <h2>Description of Extruded placemark</h2>
      <p>This is the floating placemark</p>
      <a href="http://www.phponwebsites.com">Click</a>
    ]]>
  </description>
  <LookAt>
    <longitude>-113.082680</longitude>
    <latitude>10.270718</latitude>
    <altitude>0</altitude>
    <heading>120</heading>
    <tilt>150</tilt>
    <range>250</range>
  </LookAt>
  <styleUrl>#downArrowIcon2</styleUrl>
  <Point>
    <extrude>1</extrude>
    <altitudeMode>relativeToGround</altitudeMode>
    <coordinates>-113.082680,10.270718,0</coordinates>
  </Point>
</Placemark>
</Document>
</kml>

这是我在谷歌地图中显示kml文件的html和javascript代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"> </script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"> </script>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
  function initialize() {
    var chicago = new google.maps.LatLng(41.875696,-87.624207);
    var mapOptions = {
      zoom: 11,
      center: chicago
    }

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


    var ctaLayer = new google.maps.KmlLayer({
      url: 'my kml file here'
    });
    ctaLayer.setMap(map);
  }

  google.maps.event.addDomListener(window, 'load', initialize);


</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

如何使用侧边栏显示谷歌地图？

Answer 1

您无法使用KmlLayer执行此操作。您可以使用第三方解析器（如geoxml3或geoxml-v3）或将数据导入FusionTables并查询数据以创建侧边栏，从而（取决于KML的复杂性）。

example using geoxml3

带有侧边栏的KML文件在谷歌地图中

1 个答案: