谷歌mashup的新手。我在我们的网络服务器(http://www.madisonareampo.org/maps/BRT_National.kmz)上有一个KML,可以在谷歌地图上绘制。
我有一个Google Maps mashup,我希望infowindow通过点击事件显示KML描述字段的内容。使用ArcGIS从地理数据库导出KML文件。
单击KML文件中的标记时,没有返回任何内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvkXCNOcIGLKZVgFtIykSQEbEk0db1XxY&sensor=false">
</script>
<script>
function initialize() {
var BRT = new google.maps.LatLng(40.380028, -93.440917);
var mapOptions = {
center: BRT,
zoom: 3,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map_canvas'), mapOptions);
var layer= new google.maps.KmlLayer('http://www.madisonareampo.org/maps/BRT_National.kmz',
{ suppressInfoWindows: true,
map: map });
google.maps.event.addListener(layer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.featureData.description);
});
function showInContentWindow(text) {
var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content
})
}
var panoramaOptions = {
position: BRT,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 650px; height: 400px"></div>
<div id="pano" style="position:absolute; left:660px; top: 8px; width: 650px; height: 400px;"></div>
</body>
</html>
答案 0 :(得分:2)
InfoWindows需要position
属性,您必须调用open(map)
将其绑定到地图。这是您的代码的工作版本:
google.maps.event.addListener(layer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
function showInContentWindow(position, text) {
var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content,
position: position
})
infowindow.open(map);
}