在kml中插入的HTML标签和脚本在Google地图上不起作用

Question

我是KML和Google地图的新手。 我有一个带有图片的KML，该图片托管在Google上。 通过html加载KML时，我可以在Google地图上获取图像。

    <?xml version="1.0" encoding="UTF-8"?>
        <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
        <Folder>
            <Document>
                <Placemark>
                    <name>ABC</name>
                    <description><![CDATA[<html>
                       <body>
                           <img src="https://sites.google.com/.../image1.JPG" height="100" />
                           <p>some text</p>
                        </body>
                     </html>]]></description>
                   <Point>
                      <coordinates>xx.xxxx,yy.yyyy,zzz</coordinates>
                   </Point>
              </Placemark>
           </Document>
        </Folder>
        </kml>

现在我要缩放此图像。 我找到了一个放大图像的脚本

<!DOCTYPE html>
<html>
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
  <script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script>
    <body>
        <img id="zoom_01" src="image1.JPG" height="100" data-zoom-image="image1.JPG"/> 
        <script type="text/javascript">
            $(document).ready(function () {
            $("#zoom_01").elevateZoom(); 
            }); 
        </script>
    </body>
</head>
</html>

我已经测试了上面的脚本。 它运作良好。 现在，我尝试将以上脚本插入kml description标记内。

<description><![CDATA[<html>
  <body>
    <img id="zoom_01" src="https://sites.google.com/.../image1.JPG" height="100" data-zoom-image="https://sites.google.com/.../image1.JPG"/>
    <script type="text/javascript">

            $(document).ready(function () {
                $("#zoom_01").elevateZoom(); 
            }); 
        </script>
    <p>some text</p>

  </body>
</html>]]></description>

但是，当我将鼠标移到图像上时，以上代码不会在Google地图上缩放图像。 我检查了Google crome上图像的html，发现google maps上的图像没有id标签，也没有data-zoom-image标签。 html中也缺少脚本。

知道为什么即使在kml的description标签中提到图像后，我也没有得到与图像相对应的标签和脚本吗？
如果将脚本放入kml的description标记内不是实现缩放功能的正确方法，那么如何在Google地图上实现图像的缩放功能？

Answer 1

从文档中：

<description> | 是（受支持）| HTML内容是允许的，但已进行了清理以防止跨浏览器攻击。 不支持$ [dataName]形式的实体替换。

您的JavaScript已删除，以“清理HTML”。

要解决此问题（取决于您的KML的复杂程度），您可以考虑使用第三方KML解析器加载KML。

使用geoxml3的工作示例

我必须删除$(document).ready ，添加一个事件侦听器，以监听InfoWindow上的domready事件，并更改KML中的HTML以向要缩放的图像添加一个类（我假设您想这样做到一张以上的图片）。

HTML页面中的javascript：

var map;
var infowindow;
function initialize() {
   map = new google.maps.Map(document.getElementById('map_canvas'));
   infowindow = new google.maps.InfoWindow();
    geo = new geoXML3.parser({
        map: map,
        zoom: true,
        singleInfoWindow: true,
        infoWindow: infowindow,
    });
    geo.parse("http://www.geocodezip.com/geoxml3_test/kml/SO_KmlWithJavascript_20170122.kml");
    google.maps.event.addListener(infowindow, 'domready', function() {
      $(".zoom_img").elevateZoom(); 
    });
}

KML：

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
 <Folder>
  <Document>
   <Placemark>
    <name>ABC</name>
    <description><![CDATA[<html>
     <body>
      <img class="zoom_img" src="http://www.geocodezip.com/images/world.png" height="100" data-zoom-image="http://www.geocodezip.com/images/world.png"/>
      <p>some text</p>
     </body>
    </html>]]></description>
    <Point>
     <coordinates>-72,42,0</coordinates>
    </Point>
   </Placemark>
  </Document>
 </Folder>
</kml>

在kml中插入的HTML标签和脚本在Google地图上不起作用

问题描述

1 个解决方案

解决方案1
0 2017-01-23 00:13:02

在kml中插入的HTML标签和脚本在Google地图上不起作用

问题描述

1 个解决方案

解决方案1 0 2017-01-23 00:13:02

解决方案1
0 2017-01-23 00:13:02