Question

我需要在我的网页上嵌入一个kml谷歌地球地图。我按照this说明进行了操作，但是获取嵌入代码的链接似乎没有被激活here。

我也尝试了以下代码，但它显示了一个没有kml文件中的信息按钮的简单地图

<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">  
html { height: 100% }    
body { height: 100%; margin: 0; padding: 0 }     
#google-map { height: 100% }     
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY-KEY&sensor=false"> 
</script> 
<script>
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(42.753633, 13.952404), 
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            scrollwheel: false
        }

        var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);

        var ctaLayer = new google.maps.KmlLayer({
            url: 'poligono1.kml'
        });

        ctaLayer.setMap(map);
    }       
    google.maps.event.addDomListener(window, 'load', initialize);
 </script>

 </head>
 <body onload="initialize()">

    <div id="google-map" class="google-map"></div>
 </body>

我把kml文件放在网页的同一个文件夹中。在此先感谢帮助我!!!

Answer 1

我认为来自Google开发者的这个示例可能很有用

<!DOCTYPE html>
    <html>
      <head>
        <style>
          #map-canvas {
            width: 500px;
            height: 400px;
          }
        </style>
         <script src="https://maps.googleapis.com/maps/api/js"></script>

      </head>
      <body>
        <div id="map-canvas"></div>


    <script>
    /**
     * @fileoverview Sample showing capturing a KML file click
     *   and displaying the contents in a side panel instead of
     *   an InfoWindow
     */

    var map;
    var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml';

    /**
     * Initializes the map and calls the function that creates polylines.
     */
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(-19.257753, 146.823688),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });
      loadKmlLayer(src, map);
    }

    /**
     * Adds a KMLLayer based on the URL passed. Clicking on a marker
     * results in the balloon content being loaded into the right-hand div.
     * @param {string} src A URL for a KML file.
     */
    function loadKmlLayer(src, map) {
      var kmlLayer = new google.maps.KmlLayer(src, {
        suppressInfoWindows: true,
        preserveViewport: false,
        map: map
      });
      google.maps.event.addListener(kmlLayer, 'click', function(event) {
        var content = event.featureData.infoWindowHtml;
        var testimonial = document.getElementById('capture');
        testimonial.innerHTML = content;
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </body>
    </html>

Answer 2

我尝试了scaisEdge代码，它运行正常。但在iis中缺少mime类型，然后我添加了mime类型，现在它工作正常...感谢geocodezip !!!

如何在我的网页中嵌入kml或kmz文件

2 个答案: