谷歌地图-加载KML覆盖

Google Map - Load KML Overlay

本文关键字:覆盖 KML 加载 谷歌地图      更新时间:2023-09-26

我正在尝试显示一张地图,放大一个邮政编码,然后将国会选区覆盖到地图上。覆盖在这里:https://www.google.com/fusiontables/DataSource?snapid=S506424n-DY

我下载了KML链接文件,并将其保存到本地IIS服务器上。但是,永远不会绘制覆盖。

我还在IIS服务器中添加了以下mime类型:

.kml application/vnd.google-earth.kml+xml 
.kmz application/vnd.google-earth.kmz

kml文件如下所示:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<NetworkLink>
<name><![CDATA[2012 US Congressional Districts]]></name>
<Link>
<href>
https://www.google.com/fusiontables/exporttable?query=select+col5+from+1QlQxBF17RR-89NCYeBmw4kFzOT3mLENp60xXAJM&amp;o=kmllink&amp;g=col5</href>
</Link>

我的HTML/javascript看起来像:

<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<script language="javascript">
var map;
var marker;
function showAddress() {
    $("#divGoogleMap").css('display', '');
    var mapProp = {
        center: new google.maps.LatLng(51.508742, -0.120850),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("divGoogleMap"), mapProp);
    myListener = google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
    });
    google.maps.event.addListener(map, 'drag', function (event) {
        placeMarker(event.latLng);
    });
    var zipCode = $("#txtZip").val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': zipCode }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            //Got result, center the map and put it out there
            var pos = results[0].geometry.location;
            saveLocation(pos);
            map.setCenter(pos);
            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                position: pos
            });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
    var kmlUrl = '/DesktopModules/HelloWorld/2012_US_Congressional_Districts.kml';
    var kmlOptions = {
        suppressInfoWindows: true,
        preserveViewport: false,
        map: map
    };
    var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
}
function placeMarker(location) {
    if (marker) {
        marker.setPosition(location);
    } else {
        marker = new google.maps.Marker({
            position: location,
            map: map,
            draggable: true
        });
        google.maps.event.addListener(marker, "drag", function (mEvent) {
            populateInputs(mEvent.latLng);
        });
    }
    saveLocation(location);
}
function saveLocation(pos) {
    $("#hfLatitude").val(pos.lat());
    $("#hfLogitude").val(pos.lng());
}
</script>
<table cellpadding="2" cellspacing="2" border="0">
    <tr>
        <td>
            <asp:TextBox ID="txtZip" ClientIDMode="Static" runat="server"></asp:TextBox>
        </td>
        <td>
            <input type="button" id="btnSearch" value="Search" onclick="showAddress()" />
        </td>
    </tr>
</table>
<div id="divGoogleMap" style="width: 800px;height: 600px;display: none;"></div>
<asp:HiddenField ID="hfLatitude" ClientIDMode="Static" runat="server" />
<asp:HiddenField ID="hfLongitude" ClientIDMode="Static" runat="server" />

我在这里做错了什么?

要在谷歌地图中使用,kml必须位于可访问的服务器e中,而不是本地服务器中。

这是谷歌文档。

概述

谷歌地图API支持的KML和GeoRSS数据格式显示地理信息。这些数据格式显示在使用KmlLayer对象的映射,该对象的构造函数采用可公开访问的KML或GeoRSS文件。

构造函数采用可公开访问的KML的URL。

然后为了您的需要,您必须将您的kml放在一个可公开访问的服务器中

我忘记了几年前我已经有过类似的经历,解决方案正是将文件kml放在可以从互联网访问的服务器上。