简体繁体 English

生成动态 KML 并使用 Maps API 加载它

[英]Generate dynamic KML and load it with Maps API

原文 2020-08-24 10:01:01 4 1 javascript/ php/ api/ google-maps/ kml

Hi all i have task to create monitoring of 200 ip addresses and for each of this ip we have location latitude/longitude.大家好，我的任务是创建对 200 个 ip 地址的监控，对于每个 ip，我们都有位置纬度/经度。 Now for the monitoring purpose i have perl script runing which pings all 200hosts and update their status in MySql database.现在出于监控目的，我运行了 perl 脚本，它可以 ping 所有 200 台主机并更新它们在 MySql 数据库中的状态。

Now i want to display these 200 locations on google maps and change marker color depending on status Green = online, Red = offline.现在我想在谷歌地图上显示这 200 个位置并根据状态更改标记颜色绿色 = 在线，红色 = 离线。

Also i have loaded kml fille with location of the connections and street cabling ( This is fixed and no changes are needed )我还加载了带有连接位置和街道布线的 kml fille（这是固定的，不需要更改）

How can i generate markers dynamically and display them all together with already loaded kml fille?如何动态生成标记并将它们与已加载的 kml 填充一起显示？

Or if there is any other solution i am willing to consider it.或者如果有任何其他解决方案，我愿意考虑。

Here is a sample where i am loading my kml fille:这是我加载 kml 文件的示例：

<!DOCTYPE html>
<html>
<head>
    <title>KML Layers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=MY API&callback=initMap&libraries=&v=weekly"
        defer
    ></script>
    <style type="text/css">
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
            height: 100%;
        }

        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script>
        "use strict";

        function initMap() {
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 12,
                center: {
                    lat: 35.928926,
                    lng: 14.462688
                }
            });
            const ctaLayer = new google.maps.KmlLayer({
                url: "MY KML ADDRESS",
                map: map
            });
        }
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>