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

Question

我是 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>

谢谢！

Answer 1

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

这是在解析 KML 层，you can tie each land to a layer as a button/Land A, B,

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 文件，这里是参考。一个 working fiddle

/**
 *  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" />');

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

How to parse kml file to zoom in map

html

angular

google-maps

agm-map