如何使用代码在谷歌地图中加载 kml 文件？答案

【问题标题】：How to load kml file in Google Maps using code?如何使用代码在谷歌地图中加载 kml 文件？
【发布时间】：2010-09-14 09:40:00
【问题描述】：

如何使用代码在谷歌地图中加载 kml 文件？（C#、javascript、.Net）

【问题讨论】：

标签： c# javascript google-maps kml

【解决方案1】：

我在 JavaScript 中成功集成了 kml 文件

在下面的代码中替换您的 kml 名称

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> Google Maps JavaScript API v3 Example: KmlLayer KML Features</title>
<link  href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize () {
        var myLatlng = new google.maps.LatLng(40.65, -73.95);
        var myOptions = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(
      document.getElementById("map_canvas"),
      myOptions);

        var nyLayer = new google.maps.KmlLayer(
      'https://sites.google.com/site/test/test/test.kml',
      { suppressInfoWindows: true,
          map: map
      });

        google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
            var text = kmlEvent.featureData.description;
            showInContentWindow(text);
        });

        function showInContentWindow(text) {
            var sidediv = document.getElementById('content_window');
            sidediv.innerHTML = text;
        }
    }
</script>
</head>

在正文中添加这些行

  <body onload="initialize()">
    <div id="map_canvas" style="width:79%; height:100%; float:left"></div>
    <div id="content_window" style="width:19%; height:100%; float:left"></div>

  </body>
</html>

【讨论】：