Html 如何解析kml文件以放大地图

我是Angular的新手，我使用kml文件来定位焊盘并添加一些属性，我试图创建一个按钮，根据按钮名称关注焊盘类型。 其主要思想是，kml文件中的土地可以选择放大我选择的土地类型

我得到了使用json文件的建议，但不确定如何正确使用它

<div> 
    <agm-map [latitude]="lat" [longitude]="lng" [fullscreenControl]='true' [mapTypeControl]='true' 
        [mapTypeId]="'hybrid'">
        <agm-kml-layer url="my-google-drive-link-to-the-kml"></agm-kml-layer>
      </agm-map>
      <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> 

      <ul id="myUL">
        <li><a href="#">Land A</a></li>  <--- Button i click in order to focus on 
                                                                        this land
        <li><a href="#">Land B</a></li>  
        <li><a href="#">Land C</a></li>
        <li><a href="#">Land D</a></li>
      
      </ul> 
</div>

有一些非常好的文章介绍了如何准确地做到这一点

这是对KML层的解析，
您可以将每个焊盘作为按钮绑定到一个层

var kmlLayer = new google.maps.KmlLayer();    

var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});


如果你想解析一个
local
文件，这里是ref.a

/**
*在地图上渲染指定的KML文件
*
*请注意，“地图”数据模块http://js.api.here.com/v3/3.0/mapsjs-data.js
*必须加载才能将KML解析到occcur
*
*@param{H.Map}在应用程序中映射一个HERE映射实例
*/
函数renderxml（map）{
//纽约中心地图
地图设置中心（{lat:37.4602，lng:-95.7475}）；
map.setZoom（4）；
//创建一个读取器对象，传递KML文件的URL
var reader=new H.data.kml.reader（'data/us states.kml'）；
//解析文档
parse（）；
//从读取器对象获取KML层并将其添加到地图中
addLayer（reader.getLayer（））；
}
/**
*样板图初始化代码从下面开始：
*/
//步骤1：初始化与平台的通信
var平台=新的H.service.platform({
应用程序id:“DemoAppId01082013GAL”，
应用程序代码：“AJKnXv84fjrb0KIHawS0Tg”，
乌塞西特：没错
});
var defaultLayers=platform.createDefaultLayers（）；
//步骤2：初始化映射
var map=new H.map（document.getElementById（'map'）、defaultLayers.normal.map、{
缩放：1
});
//步骤3：使地图具有交互性
//MapEvents启用事件系统
//行为实现了平移/缩放的默认交互（也在移动触摸环境中）
var behavior=newh.mapevents.behavior（newh.mapevents.mapevents（map））；
//步骤4：创建默认UI组件，用于显示气泡
var ui=H.ui.ui.createDefault（映射，默认层）；
//步骤5：主要逻辑如下
renderKML（map）；
$（'head'）。追加（''）；
嘿，谢谢，我想我缺少了setCenter功能，它可以让我专注于我选择的土地类型。。非常感谢：-）
/**
 *  Renders specified a KML file on the map
 *
 *  Note that the maps data module http://js.api.here.com/v3/3.0/mapsjs-data.js
 *  must be loaded for KML parsing to occcur
 *
 * @param {H.Map} map A HERE Map instance within the application
 */
function renderKML(map) {
  // Center map on New York
  map.setCenter({lat: 37.4602, lng: -95.7475});
  map.setZoom(4);

  // Create a reader object passing in the URL of our KML file
  var reader = new H.data.kml.Reader('data/us-states.kml');

  // Parse the document
  reader.parse();

  // Get KML layer from the reader object and add it to the map
  map.addLayer(reader.getLayer());
}


/**
 * Boilerplate map initialization code starts below:
 */

// Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'DemoAppId01082013GAL',
  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
  useCIT: true
});
var defaultLayers = platform.createDefaultLayers();

// Step 2: initialize a map
var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map, {
  zoom: 1
});

// Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Step 4: create the default UI component, for displaying bubbles
var ui = H.ui.UI.createDefault(map, defaultLayers);

// Step 5: main logic goes here
renderKML(map);

$('head').append('<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" type="text/css" />');