Google 地图 KML InfoWindow 未呈现
Google maps KML InfoWindow not rendering
我正在使用 Google 地图 API v3 将 KML 文件调用到 Google 地图中。这对我来说已经有一段时间了,有简单的多边形和自定义图标(地图图钉)。我现在想增强我的实现以添加应在单击图标时打开的 InfoWindows。
在我的测试 kml 文件中,我有 1 个多边形和两个图标,每个图标都包含在一个地标中。每个地标都有关联的样式。这两个图标各有一个 BalloonStyle,它将在关联的 InfoWindow 中显示相关文本。这两个图标将在多边形内呈现。
所有三个项目都正确呈现并且 kmlStatus 返回为 'OK'。但是,InfoWindow 在第一个引脚(Style id="destPin")上打开正常,但在第二个引脚(Style id="tractPin1")上打开不正常。
我已经在 https://developers.google.com/maps/documentation/javascript/ 和其他相关网站上研究了 2 天;所以我开始认为这要么是我严重缺乏理解,要么是 Google KML 实现的一些怪癖。
这是 .KML 文件:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>example26.kml</name>
<Style id="destPin">
<IconStyle>
<Icon>
<href>https://example.com/dest_marker.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text><![CDATA[$[address]]]></text>
</BalloonStyle>
</Style>
<Style id="tractPin1">
<IconStyle>
<Icon>
<href>https://example.com/pin_1.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text><![CDATA[Census Tract $[name] <HR> $[description]]]></text>
</BalloonStyle>
</Style>
<Style id="tractPoly">
<LineStyle>
<color>64000000</color>
<width>2</width>
</LineStyle>
<PolyStyle>
<color>50F00014</color>
<fill>1</fill>
<outline>1</outline>
</PolyStyle>
</Style>
<Placemark>
<name>Census Tract 322.14</name>
<styleUrl>#tractPoly</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>-122.026918,47.588168,0 -122.014066,47.588019,0 -122.00872,47.587924,0 -122.008683,47.595191,0 -122.008679,47.596783,0 -122.008692,47.596982,0 -122.007825,47.601505,0 -122.007278,47.60524,0 -122.005975,47.609314,0 -122.005302,47.61252,0 -122.004694,47.616446,0 -122.013867,47.616726,0 -122.035479,47.616536,0 -122.035478,47.605487,0 -122.035514,47.601784,0 -122.035438,47.595471,0 -122.035458,47.59174,0 -122.035448,47.588478,0 -122.035455,47.588268,0 -122.026918,47.588168,0 </coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<address>destination address, WA</address>
<styleUrl>#destPin</styleUrl>
<Point>
<coordinates>-122.03388,47.6142212,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>322.14</name>
<description>2010 Census Population 6264 - 2015 Population Estimate 6867</description>
<styleUrl>#tractPin1</styleUrl>
<Point>
<coordinates>-122.022,47.603,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
...这是将 KML 提交到 Google 的 javascript。
// Displays the map for a given kml file
function displayMap(kmlFile) {
var mapOptions = {
position: mapCenter,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
infowindow = new google.maps.InfoWindow({}); // copied from geocodezip
var kmlOptions = {
//suppressInfoWindows: false,
preserveViewport: false
//map: map
};
kmlLayer = new google.maps.KmlLayer(kmlFile, kmlOptions);
google.maps.event.addListener(kmlLayer, "status_changed", function() {
console.log('KML status = ', kmlLayer.getStatus());
});
kmlLayer.setMap(map); // this is copied from geocodezip
} // end of function displayMap
原来我在渲染地图的代码中有一个错误。
mapOptions 对象:
var mapOptions = {
position: mapCenter,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
...行中包含错误:
position: mapCenter,
...实际上应该是:
center: mapCenter,
奇怪的是地图和 kmlLayer 渲染正常。此外,第一个地图图钉显示其信息窗口,但这个简单的错误以某种方式阻止了其他地标呈现其信息窗口。只是那个简单的疏忽就花费了我很多时间;更不用说2声望了。
我正在使用 Google 地图 API v3 将 KML 文件调用到 Google 地图中。这对我来说已经有一段时间了,有简单的多边形和自定义图标(地图图钉)。我现在想增强我的实现以添加应在单击图标时打开的 InfoWindows。
在我的测试 kml 文件中,我有 1 个多边形和两个图标,每个图标都包含在一个地标中。每个地标都有关联的样式。这两个图标各有一个 BalloonStyle,它将在关联的 InfoWindow 中显示相关文本。这两个图标将在多边形内呈现。
所有三个项目都正确呈现并且 kmlStatus 返回为 'OK'。但是,InfoWindow 在第一个引脚(Style id="destPin")上打开正常,但在第二个引脚(Style id="tractPin1")上打开不正常。
我已经在 https://developers.google.com/maps/documentation/javascript/ 和其他相关网站上研究了 2 天;所以我开始认为这要么是我严重缺乏理解,要么是 Google KML 实现的一些怪癖。
这是 .KML 文件:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>example26.kml</name>
<Style id="destPin">
<IconStyle>
<Icon>
<href>https://example.com/dest_marker.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text><![CDATA[$[address]]]></text>
</BalloonStyle>
</Style>
<Style id="tractPin1">
<IconStyle>
<Icon>
<href>https://example.com/pin_1.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text><![CDATA[Census Tract $[name] <HR> $[description]]]></text>
</BalloonStyle>
</Style>
<Style id="tractPoly">
<LineStyle>
<color>64000000</color>
<width>2</width>
</LineStyle>
<PolyStyle>
<color>50F00014</color>
<fill>1</fill>
<outline>1</outline>
</PolyStyle>
</Style>
<Placemark>
<name>Census Tract 322.14</name>
<styleUrl>#tractPoly</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>-122.026918,47.588168,0 -122.014066,47.588019,0 -122.00872,47.587924,0 -122.008683,47.595191,0 -122.008679,47.596783,0 -122.008692,47.596982,0 -122.007825,47.601505,0 -122.007278,47.60524,0 -122.005975,47.609314,0 -122.005302,47.61252,0 -122.004694,47.616446,0 -122.013867,47.616726,0 -122.035479,47.616536,0 -122.035478,47.605487,0 -122.035514,47.601784,0 -122.035438,47.595471,0 -122.035458,47.59174,0 -122.035448,47.588478,0 -122.035455,47.588268,0 -122.026918,47.588168,0 </coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<address>destination address, WA</address>
<styleUrl>#destPin</styleUrl>
<Point>
<coordinates>-122.03388,47.6142212,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>322.14</name>
<description>2010 Census Population 6264 - 2015 Population Estimate 6867</description>
<styleUrl>#tractPin1</styleUrl>
<Point>
<coordinates>-122.022,47.603,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
...这是将 KML 提交到 Google 的 javascript。
// Displays the map for a given kml file
function displayMap(kmlFile) {
var mapOptions = {
position: mapCenter,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
infowindow = new google.maps.InfoWindow({}); // copied from geocodezip
var kmlOptions = {
//suppressInfoWindows: false,
preserveViewport: false
//map: map
};
kmlLayer = new google.maps.KmlLayer(kmlFile, kmlOptions);
google.maps.event.addListener(kmlLayer, "status_changed", function() {
console.log('KML status = ', kmlLayer.getStatus());
});
kmlLayer.setMap(map); // this is copied from geocodezip
} // end of function displayMap
原来我在渲染地图的代码中有一个错误。
mapOptions 对象:
var mapOptions = {
position: mapCenter,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
...行中包含错误:
position: mapCenter,
...实际上应该是:
center: mapCenter,
奇怪的是地图和 kmlLayer 渲染正常。此外,第一个地图图钉显示其信息窗口,但这个简单的错误以某种方式阻止了其他地标呈现其信息窗口。只是那个简单的疏忽就花费了我很多时间;更不用说2声望了。