javascript - 如何在标记上的信息窗口中添加新按钮?
问题描述
这个 JS 代码
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '
</p>'+
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
我想在名为“uluru”的信息窗口中添加一个新按钮。按钮应该像照片一样在关闭键旁边。你能帮我吗?
解决方案
您可以通过设置内容来创建一个按钮,contentString
并将其定位到您想要的位置,如下面的演示。
function initMap() {
var uluru = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString = '<div id="content">' + '<button type="button" class="custom_button">!!!</button>' +
'<div id="siteNotice"></div>' +
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
'<div id="bodyContent">' +
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the ' +
'Northern Territory, central Australia. It lies 335 km (208 mi)</p>' +
`<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">` +
'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
'(last visited June 22, 2009).</p>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
initMap()
#map {
height: 90vh;
}
.custom_button {
position: absolute;
top: 0px;
right: 20px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
推荐阅读
- python - 如何在 CSV 文件中随机选择一定数量的行并保留其他行
- logparser - LogParser 本地计算机可能没有必要的注册表信息或消息 DLL 文件来显示消息
- php - Web.config:将带有斜杠输入的 URL 重定向到不带斜杠的 URL
- asp.net-mvc - ASP MVC 中的急切加载从导航属性返回 null
- quickbooks - Quickbooks无效的社会安全号码错误
- c# - 使用 AddAttribute 的下划线和删除线未正确更新
- php - 使用 Symfony 显示 PHP 的错误、var_dump 等
- javascript - JavaScript 文件连接问题
- c++ - 同时与两个片段着色器发生碰撞
- oracle - Docker 中的 Oracle 12c