Javascript 从文本区域在谷歌地图上绘制kml图层

我想在谷歌地图上绘制一个kml层，使用javascript api将kml代码复制到文本区域，就像他们在本页中所做的那样：

我在文档中找到的所有示例都从一个文件加载kml层

。使用geoxml3第三方KML解析器和另一个第三方库，该库添加了编辑KML的功能（听起来您不需要）

代码段：

var地理编码器；
var映射；
函数初始化（）{
map=新建google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
document.getElementById（“kmlString”）.value='#transYellowPolyActiveTester06.30889892578125,53.28820543193896.29791259765625,53.28410053532493.233367919921875,53.21096737507053 6.5093994140625,53.19698389904798 6.50390625,53.27096221595853#transYellowPolyActivejahoor06.168479919433594,53.30318495818702.143711524,53.1387958484847528758259094238281,53.2707568976735 6.2010955810546875,53.29867113343524';
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
var mapOverlays=[]；
var geoXml=null；
//创建公共infoWindow对象
var infWindow=new google.maps.InfoWindow（）；
函数setMapFromKML（kmlString）{
如果（kmlString.length==0）{
返回false；
}
if（typeof geoXML3==“undefined”）{//检查geoXML3解析器的包含
// http://code.google.com/p/geoxml3/ 
警报（“不包括geoxml3.js”）；
返回；
}
如果（！geoXml）
geoXml=新的geoXML3.parser({
地图：地图，
zoom:错，
suppressInfoWindows：true
});
parseKmlString（kmlString）；
var tmpOverlay，卵繁殖；
对于（var m=0；m'；
返回内容；
}
函数openInfowindow（覆盖、板条、内容）{
var div=document.createElement（'div'）；
div.innerHTML=内容；
设置样式（分区{
身高：“100%”
});
infWindow.setContent（div）；
输入窗口设置位置（板条）；
infWindow.relatedOverlay=覆盖；
var t=overlay.get（'fillColor'）；
infWindow.open（mapObj）；
}

html，
身体，
#地图画布{
高度：500px；
宽度：500px；
边际：0px；
填充：0px
}

。使用geoxml3第三方KML解析器和另一个第三方库，该库添加了编辑KML的功能（听起来您不需要）

代码段：

var地理编码器；
var映射；
函数初始化（）{
map=新建google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
document.getElementById（“kmlString”）.value='#transYellowPolyActiveTester06.30889892578125,53.28820543193896.29791259765625,53.28410053532493.233367919921875,53.21096737507053 6.5093994140625,53.19698389904798 6.50390625,53.27096221595853#transYellowPolyActivejahoor06.168479919433594,53.30318495818702.143711524,53.1387958484847528758259094238281,53.2707568976735 6.2010955810546875,53.29867113343524';
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
var mapOverlays=[]；
var geoXml=null；
//创建公共infoWindow对象
var infWindow=new google.maps.InfoWindow（）；
函数setMapFromKML（kmlString）{
如果（kmlString.length==0）{
返回false；
}
if（typeof geoXML3==“undefined”）{//检查geoXML3解析器的包含
// http://code.google.com/p/geoxml3/ 
警报（“不包括geoxml3.js”）；
返回；
}
如果（！geoXml）
geoXml=新的geoXML3.parser({
地图：地图，
zoom:错，
suppressInfoWindows：true
});
parseKmlString（kmlString）；
var tmpOverlay，卵繁殖；
对于（var m=0；m//create a common infoWindow object
var infWindow = new google.maps.InfoWindow();

function setMapFromKML(kmlString) {
  if (kmlString.length == 0) {
    return false;
  }
  if (typeof toGeoJSON == "undefined") { // check for include of togeojson parser
    // https://github.com/mapbox/togeojson
    alert("toGeoJSON.js not included");
    return;
  }
  //convert dom string to xmldocument 
  var domparser = new DOMParser();
  var kml = domparser.parseFromString(kmlString, "text/xml");

  var geojson = toGeoJSON.kml(kml);

  var features = map.data.addGeoJson(geojson);

  //save the overlay in the array

  var bounds = new google.maps.LatLngBounds();

  features.forEach(function(feature) {


    feature.getGeometry().forEachLatLng(function(latlng) {
      bounds.extend(latlng);
    });


  });

  map.fitBounds(bounds);

  map.data.addListener('click', function(event) {
    var infContent = GetContent(event);
    var latlng;
    if (typeof event.feature.getGeometry().get !== "undefined") { //for point
      latlng = event.feature.getGeometry().get();
    } else { //polygon/multi,etc...
      var polybounds = new google.maps.LatLngBounds()
      event.feature.getGeometry().forEachLatLng(function(featurelatlng) {
        polybounds.extend(featurelatlng);
      });

      latlng = polybounds.getCenter();
    }


    openInfowindow(latlng, infContent);

  });



}

function GetContent(event) {


  var content = '<div><h3>' + event.feature.getProperty('name') + '</h3>' + event.feature.getGeometry().
  getType() + '<br></div>';
  return content;
}

function openInfowindow(latLng, content) {
  var div = document.createElement('div');
  div.innerHTML = content;

  infWindow.setContent(div);
  infWindow.setPosition(latLng);
  infWindow.open(map);
}