如何设置通过google maps api kmllayer调用的kml文件的infowindow的宽度？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何设置通过google maps api kmllayer调用的kml文件的infowindow的宽度？相关的知识，希望对你有一定的参考价值。
如何设置通过google maps api kmllayer函数调用的kml文件的infowindow的宽度？
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<div id="mapindex"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('mapindex'), {
center: {
lat: 54.5559,
lng: 16.5984
},
zoom: 7,
mapTypeId: 'hybrid'
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.instead.com.pl/test.kml?time=' + new Date().getTime(),
map: map,
preserveViewport: true,
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
但是我想设置infowindow的宽度或最大宽度，或者仅设置名称标签。
我真的已经阅读了我在互联网上找到的所有内容，但无法找到解决方案。甚至有可能实现吗？
答案
您可以取消单击KmlLayer时创建的标准InfoWindow，而是创建另一个具有maxWidth的InfoWindow。以下是对代码的修改：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
font-family: Ubuntu, Arial, sans-serif;
}
#mapindex {
width: 100%;
height: 100%;
position: relative;
}
</style>
</head>
<body>
<div id="mapindex"></div>
<script>
var map;
function initMap() {
var map = new google.maps.Map(document.getElementById('mapindex'), {
center: {
lat: 54.5559,
lng: 16.5984
},
zoom: 7,
mapTypeId: 'hybrid'
});
var kmlLayer = new google.maps.KmlLayer({
url: 'http://www.instead.com.pl/test.kml?time=' + new Date().getTime(),
map: map,
preserveViewport: true,
suppressInfoWindows: true
});
var infoWindow = new google.maps.InfoWindow();
kmlLayer.addListener('click', function(event) {
var content = event.featureData.infoWindowHtml;
infoWindow.setOptions({
content: content,
position: event.latLng,
maxWidth: 200
});
infoWindow.open(map);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
另一答案
看起来这是experimental version中的（另一个）错误
proof of concept fiddle (using v=3)
代码段：
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 100%;
font-family: Ubuntu, Arial, sans-serif;
}
#mapindex {
width: 100%;
height: 100%;
position: relative;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<div id="mapindex"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('mapindex'), {
center: {
lat: 54.5559,
lng: 16.5984
},
zoom: 7,
mapTypeId: 'hybrid'
});
var infowindow = new google.maps.InfoWindow();
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.instead.com.pl/test.kml?time=' + new Date().getTime(),
map: map,
preserveViewport: true,
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=3">
</script>
</body>
</html>以上是关于如何设置通过google maps api kmllayer调用的kml文件的infowindow的宽度？的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps API 和 KML 文件 LocalHost 开发选项
JavaScript 使用“我的地图”中的.kml文件的Google Maps API
google maps api v3 导出当前地图的 kml 文件
使用 Google Maps API V3，确定标记是不是在 KML 图层边界内
如何使用Google API，以便将先前创建的KML文件发送到“我的Google地图”，然后获取返回的URL以显示在网页中