简体   繁体   English

动态KML Google地图

[英]Dynamic kml google maps

I want to create a google maps app with kml, and i want to create the kml file dynamically depending on the zoom of the user. 我想使用kml创建一个Google Maps应用,并且我想根据用户的缩放动态地创建kml文件。

Something like google earth but in google maps (the zooming part) 类似于Google Earth,但在Google Maps中(缩放部分)

I tried to use the markermanager and clusterer but i have too many markers and performance on mobile devices is very bad but with kml that is not an issue but i have all marker displayed at once. 我尝试使用markermanager和clusterer,但是我有太多的标记,并且在移动设备上的性能非常差,但是使用kml并不是问题,但是我可以一次显示所有标记。

I tried to use NetworkLink in the kml file but i dont get any parameters like zoom or bounds (i am using php) 我试图在kml文件中使用NetworkLink,但是我没有得到任何参数,例如zoom或bounds(我正在使用php)

I know it could be done with JavaScript 我知道可以用JavaScript完成

new google.maps.KmlLayer('mykmlgenerator.php?zoom='+zoom);

but i would like to avoid that is there any way? 但我想避免那有什么办法?

thank you 谢谢

I tried this, only to realize that dynamic KML with Google Maps is clunky. 我尝试了这一点,才意识到使用Google Maps进行动态KML笨拙。 If you can, it's easier to just convert your KML into JSON and create your markup on the map using the Google Maps JavaScript API ( https://developers.google.com/maps/documentation/javascript/ ). 如果可以的话,使用Google Maps JavaScript API( https://developers.google.com/maps/documentation/javascript/ )将KML转换为JSON并在地图上创建标记会更容易。

Firstly, let me be clear that OpenLayers are better than Google Maps if you want to use dynamic KML. 首先,让我清楚一点,如果您想使用动态KML,则OpenLayers比Google Maps更好。 Next, I want to give some simple JavaScript that we will use in OpenLayers. 接下来,我想提供一些简单的JavaScript,供我们在OpenLayers中使用。 You should try them since it also using JavaScript library. 您应该尝试使用它们,因为它也使用JavaScript库。

Here I briefly show you how the codes are written. 在这里,我向您简要介绍代码的编写方式。

<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", "yourkml.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>

As you can see, there is a small orange dot on the map. 如您所见,地图上有一个小的橙色圆点。 That is the KML file loaded on Google Maps. 那就是加载在Google Maps上的KML文件。 And If you want to refresh them, check this link 如果要刷新它们,请检查此链接

Last but not least, I hope my answer isn't too late for you. 最后但并非最不重要的一点,我希望我的回答对您来说还为时不晚。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM