你可以在没有网址的Google地图中显示kml吗?

时间:2015-03-20 02:42:33

标签: google-maps-api-3

如果我在文件中包含KML的内容并希望它在google地图上显示而不指定URL,是否可以?假如我有一个包含整个KML字符串的变量,我可以以某种方式将其加载到Google Maps API v3中,或者这是不可能的?

1 个答案:

答案 0 :(得分:0)

使用原生Google Maps Javascript API v3无法实现。可以使用第三方库geoxml3

的parseKmlString方法完成

[免责声明:我是geoxml3库的当前维护者]

代码段:

var kmlString = '<kml><Document><name>Massachusetts Cities</name><Folder><Placemark><name>Boston</name><description>Boston is the capital of and largest city in Massachusetts.  The Boston Massacre and the Boston Tea Party occurred in Boston and led to the American Revolution.</description><Point><coordinates>-71.05977300312775,42.35843100531217,3.1482280535562</coordinates></Point></Placemark><Placemark><name>Worcester</name><description>Worcester is known as the &quot;Heart of the Commonwealth&quot; due to its location in central Massachusetts, thus, a heart is the official symbol of the city.</description><Point><coordinates>-71.80229299737233,42.26259300656061,145.2545892926215</coordinates></Point></Placemark><Placemark><name><![CDATA[M]]></name><description><![CDATA[the letter M]]></description><Polygon><outerBoundaryIs><LinearRing><coordinates>-71.62467956542969,42.3280930282246 -71.62742614746094,42.25088477477569 -71.60476684570312,42.249868245939346 -71.6033935546875,42.29204042491614 -71.575927734375,42.25291778330197 -71.5594482421875,42.25190128722991 -71.53884887695312,42.28594498725423 -71.53678894042969,42.249868245939346 -71.51206970214844,42.249359975377885 -71.51893615722656,42.33215399891373 -71.55876159667969,42.33164639191572 -71.57180786132812,42.285437007491545 -71.59584045410156,42.32910829547648</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark><Placemark><name><![CDATA[A]]></name><description><![CDATA[the letter A]]></description><Polygon><outerBoundaryIs><LinearRing><coordinates>-71.41044616699219,42.3346919724542 -71.37130737304688,42.3357071331938 -71.34452819824219,42.251393033050576 -71.37062072753906,42.249868245939346 -71.38229370117188,42.279340930853145 -71.40838623046875,42.279340930853145 -71.422119140625,42.248851700720934 -71.45370483398438,42.248851700720934,0</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark><Placemark><name></name><description><![CDATA[]]></description><LineString><coordinates>-71.32186889648438,42.385937107381146 -71.69540405273438,42.379850764344134 -71.707763671875,42.14813264235833 -71.1968994140625,42.15118709351198 -71.32186889648438,42.385937107381146</coordinates></LineString></Placemark></Folder></Document></kml>'

var map;

function initialize() {
  var myOptions = {
    zoom: 8,
    center: {
      lat: 42,
      lng: -70
    }
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
  infowindow = new google.maps.InfoWindow({});
  geoXml = new geoXML3.parser({
    map: map,
    infoWindow: infowindow,
    singleInfoWindow: true
  });
  geoXml.parseKmlString(kmlString);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  width: 750px;
  height: 600px;
  margin: 0;
  padding: 0;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/geocodezip/geoxml3@master/polys/geoxml3.js"></script>
<div id="map_canvas">