我可以在KML文件中使用SVG图标作为标记吗？ [英] Can I use a SVG icon for markers in a KML file?

问题描述

KML文件有一个< Style> 元素，我想指向一个.SVG文件。我们的目的是在地图上缩放时标记应自动缩放。

标记如下：

 <？xml version =1.0encoding =UTF-8？> 
< kml xmlns =http://earth.google.com/kml/2.2xmlns：xsd =http://www.w3.org/2001/XMLSchemaxmlns：xsi =http： //www.w3.org/2001/XMLSchema-instance\"> 
<文件> 
<名称>某些名称< /名称> 
< Style id =GarageStyle> 
< IconStyle> 
<图标> 
< href> https：//drive.google.com/uc？export = download& id = 0B7m5RwNbU3b0VmpzRnI0aTBGbmM< / href> 
< /图标> 
< / IconStyle> 
< / style> 
<地标> 
<名称> SkaveAutoværksted*< / name> 
< styleUrl>＃GarageStyle< / styleUrl> 
< description>& lt; div style =clear：both; display：block;& amp; gt; SkaveAutoværksted*& lt; / div& amp; amp& amp ; amp; lt; div style =clear：both; display：block;& amp; gt; Viborgvej 240& lt; / div& amp; amp; lt; div style =clear：两者;显示器：块;& amp; gt; 7500 Holstebro< / div& gt;& lt; div style =clear：both; display：block;& amp ; gt; Tlf：97468101& lt; / div& amp; gt;< / description> 
<地址> Viborgvej 240,7500霍尔斯特布罗< / address> 
< Point> 
<坐标> 8.80521163606404,56.3903905969469< /坐标> 
< / Point> 
< /地标> 
< / Document> 
< / kml> 
  

它不适用于.SVG，但适用于.PNG - 是因为Google不支持。标记的SVG图标，还是我做错了？

初始化映射的代码：

 < HTML> 
< head> 
< meta http-equiv =content-typecontent =text / html; charset = UTF-8> 
< script src =https://maps.google.com/maps/api/js?key=MY_PRIVATE_KEY;callback?sensor=falsetype =text / javascript>< / script> 
< script src =/ Webresources / ClientGlobalContext.js.aspxtype =text / javascript>< / script> 
< style> 
 / *总是显式设置地图高度来定义包含地图的div 
 *元素的大小。 * / 
 #map {
 height：100％; 
} 
< / style> 
< meta> 
< meta> 
< / head> 
< body style =word-wrap：break-word;> 
< div id =map>< / div> 
 
< script type =text / javascript> 
 
 
 var attributes = GetGlobalContext（）。getQueryStringParameters（）。data; 
 
 var attributesSplit = attributes.split（，）; 
 
 var addressField; 
 var zoom; 
 var mapType; 
 
 var arrayLength = attributesSplit.length; 
 
 for（var i = 0; i< arrayLength; i ++）{
 var currentAttribute = attributesSplit [i] .split（=）; 
 
 var attributeName = currentAttribute [0]; 
 var attributeValue = currentAttribute [1]; 
 
 switch（attributeName）{
 caseaddress_field：
 addressField = attributeValue; 
休息; 
 casezoom：
 zoom = parseInt（attributeValue）; 
休息; 
 casemaptype：
 mapTypeConfigured = attributeValue; 
 switch（mapTypeConfigured）{
 caseterrain：
 mapType = google.maps.MapTypeId.TERRAIN; 
休息; 
 casesatellite：
 mapType = google.maps.MapTypeId.SATELLITE; 
休息; 
默认值：
 break; 
} 
 break; 
默认值：
 break; 
 
 
 
 //将缩放设置为默认值（如果尚未配置）
 if（！zoom）{
 zoom = 16; 
} 
 if（！mapType）{
 mapType = google.maps.MapTypeId.SATELLITE; 
} 
 
 var address = window.parent.Xrm.Page.getAttribute（addressField）.getValue（）; 
 
 var map = new google.maps.Map（document.getElementById（'map'），{
 mapTypeId：mapType，
 zoom：zoom 
}）; 
 
 var geocoder = new google.maps.Geocoder（）; 
 
 geocoder.geocode（{
'address'：address 
}，
 function（results，status）{
 if（status == google。 maps.GeocoderStatus.OK）{
 google.maps.Marker（{
 position：results [0] .geometry.location，
 map：map 
}）; 
 map.setCenter（results [0] .geometry.location）; 
} 
}）; 
 $ b var ctaLayer = new google.maps.KmlLayer（{
 url：generateUrl（'URL_TO_KML_FILE'），
 map：map，
 preserveViewport：true 
}）; 
 //用于一天刷新两次KML缓存
 function generateUrl（url）{
 
 var dateObj = new Date（）; 
 var month = dateObj.getUTCMonth（）+ 1; //从1-12月开始
 var day = dateObj.getUTCDate（）; 
 var year = dateObj.getUTCFullYear（）; 
 
 var currentHour = dateObj.getHours（）; 
 
 var noon; 
 
 if（currentHour> = 12）
 {
 noon =afterNoon; 
} 
 else 
 {
 noon =beforeNoon; 
} 
 
 var newdate =& +年份+_+月份+_+日期+_+中午; 
 
 var newUrl = url + newdate; 
 
 return newUrl; 
} 
 
< / script> 
 
< / body> 
< / html> 
  

解决方案

我的例子中的问题是，有一个扩展。由于我将其托管在Google云端硬盘中，因此无法扩展，因此存在问题。因此，该网址应以.SVG，.PNG或任何正在使用的内容结尾。

I have a KML file which I am passing on to Google Maps.

The KML file has a <Style> element, where I want to point to a .SVG file. The intention is that the marker should auto-scale when zooming in our out on the map.

The markup is below:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <Document>
      <name>Some Name</name>
      <Style id="GarageStyle">
         <IconStyle>
            <Icon>
               <href>https://drive.google.com/uc?export=download&id=0B7m5RwNbU3b0VmpzRnI0aTBGbmM</href>
            </Icon>
         </IconStyle>
      </Style>
      <Placemark>
         <name>Skave Autoværksted*</name>
         <styleUrl>#GarageStyle</styleUrl>
         <description>&amp;lt;div style="clear: both; display: block; "&amp;gt;Skave Autoværksted*&amp;lt;/div&amp;gt;&amp;lt;div style="clear: both; display: block; "&amp;gt;Viborgvej 240&amp;lt;/div&amp;gt;&amp;lt;div style="clear: both; display: block; "&amp;gt;7500 Holstebro&amp;lt;/ div &amp;gt;&amp;lt;div style="clear: both; display: block; "&amp;gt;Tlf: 97468101&amp;lt;/ div &amp;gt;</description>
         <address>Viborgvej 240, 7500 Holstebro</address>
         <Point>
            <coordinates>8.80521163606404,56.3903905969469</coordinates>
         </Point>
      </Placemark>
   </Document>
</kml>

It doesnt work with the .SVG, but works with .PNG - is that because Google doesnt support .SVG icons for markers, or am I doing it wrong?

The code that initializes the map:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="https://maps.google.com/maps/api/js?key=MY_PRIVATE_KEY;callback?sensor=false" type="text/javascript"></script>
    <script src="/Webresources/ClientGlobalContext.js.aspx" type="text/javascript"></script>
    <style>
        /* Always set the map height explicitly to define the size of the div
        * element that contains the map. */
        #map {
            height: 100%;
        }
    </style>
    <meta>
    <meta>
</head>
<body style="word-wrap: break-word;">
    <div id="map"></div>

    <script type="text/javascript">


        var attributes = GetGlobalContext().getQueryStringParameters().data;

        var attributesSplit = attributes.split(",");

        var addressField;
        var zoom;
        var mapType;

        var arrayLength = attributesSplit.length;

        for (var i = 0; i < arrayLength; i++) {
            var currentAttribute = attributesSplit[i].split("=");

            var attributeName = currentAttribute[0];
            var attributeValue = currentAttribute[1];

            switch (attributeName) {
                case "address_field":
                    addressField = attributeValue;
                    break;
                case "zoom":
                    zoom = parseInt(attributeValue);
                    break;
                case "maptype":
                    mapTypeConfigured = attributeValue;
                    switch (mapTypeConfigured) {
                        case "terrain":
                            mapType = google.maps.MapTypeId.TERRAIN;
                            break;
                        case "satellite":
                            mapType = google.maps.MapTypeId.SATELLITE;
                            break;
                        default:
                            break;
                    }
                    break;
                default:
                    break;
            }
        }

        // Set zoom to default value if it has not been configured
        if (!zoom) {
            zoom = 16;
        }
        if (!mapType) {
            mapType = google.maps.MapTypeId.SATELLITE;
        }

        var address = window.parent.Xrm.Page.getAttribute(addressField).getValue();

        var map = new google.maps.Map(document.getElementById('map'), {
            mapTypeId: mapType,
            zoom: zoom
        });

        var geocoder = new google.maps.Geocoder();

        geocoder.geocode({
            'address': address
        },
            function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map
                    });
                    map.setCenter(results[0].geometry.location);
                }
            });

        var ctaLayer = new google.maps.KmlLayer({       
            url: generateUrl('URL_TO_KML_FILE'),
            map: map,
            preserveViewport: true
        });
        // Used to refresh the KML cache twice a day 
        function generateUrl(url) {

            var dateObj = new Date();
            var month = dateObj.getUTCMonth() + 1; //months from 1-12
            var day = dateObj.getUTCDate();
            var year = dateObj.getUTCFullYear();

            var currentHour = dateObj.getHours();

            var noon;

            if(currentHour >= 12)
            {
                noon = "afterNoon";
            }
            else
            {
                noon = "beforeNoon";
            }

            var newdate = "&" + year + "_" + month + "_" + day + "_" + noon;

            var newUrl = url + newdate;

            return newUrl;
        }

    </script>

</body>
</html>

解决方案

The problem in my example is that the URL needs to have an extension. Since I am hosting it on Google Drive there is no extension, hence the problem. So the URL should end with .SVG, .PNG or whatever is being used.

这篇关于我可以在KML文件中使用SVG图标作为标记吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！