google-maps - 如何使用javascript显示KML文件

标签 google-maps

如何使用 JavaScript 显示 Google Earth (KML) 文件。

谢谢

最佳答案

我假设您想在浏览器(最好是 Mozilla Firefox)中查看 KML 文件。首先,我想提供一些我们将在 OpenLayers 中使用的简单 JavaScript。你应该尝试一下,因为它也使用 JavaScript 库。

这里简单介绍一下代码是怎么写的。

<html>
<head>
<title>Google Layer with KML file</title>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRTQDbvAygy0cfGJr8dEMAYKf3RWNBQqP9mjKIsqTfmAlz5LOJ3Xpy5s4w'></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">

var map;

function init() {
    // Create the map object
    map = new OpenLayers.Map('map');
    // Create a Google layer
    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", // the default
        {numZoomLevels: 20}
    );
    // Add layer to map
    map.addLayer(gmap);

    //Adding KML file to map
    map.addLayer(new OpenLayers.Layer.GML("KML", "kompleks_antarabangsa.kml", 
           {
            format: OpenLayers.Format.KML, 
            formatOptions: {
              extractStyles: true, 
              extractAttributes: true,
              maxDepth: 2
            }
           }));
    // Zoom to Kuala Lumpur, Malaysia
    map.setCenter(new OpenLayers.LonLat(101.686855,3.139003), 13);         
}
</script>
</head>
<body onload="init()">
<h1 id="title">Google Layer with KML file</h1>
<div id="map" style='width: 700px; height: 700px'></div>
</body>
</html>

正如你所看到的, map 上有一个橙色的小点。这是 Google map 上加载的 KML 文件。

尝试使用任何软件运行 HTML 代码。但是,我建议你使用Notepad++。最后但并非最不重要的一点是,我希望我的回答对您来说还不算太晚,Kyathi

关于google-maps - 如何使用javascript显示KML文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3810829/

相关文章:

javascript - 如何在谷歌地图中的当前位置而不是标记上制作圆圈

javascript - 未处理的 promise 拒绝: TypeError: undefined is not a function evaluating 'departureloc.map' occurs when mapping for setState in react native

php - 通过 JavaScript 或 PHP 使用 Google map API?

r - R中的get_map可以生成分辨率高于640 x 640的 map 吗?

google-maps - Xamarin 谷歌地图自动完成

函数调用中的 javascript 作用域问题

php - 移动服务器破坏了 MySQL 数据库驱动的谷歌地图

javascript - 如何提示从嵌入 map 进入 Google map 导航器页面打开 Google map 路线?

javascript - 查找 LatLng Coord 是否位于其他两个 LatLng Coords 之间

android - Google Maps Android API v2 - 与我的位置相关的 API 已弃用。为什么?