我正在使用html2canvas打印Google地图，以获取地图的pdf。我禁用了背景图像，并在pdf中得到了以下图片google map drawing tool to pdf。我现在想知道的是如何使Google地图的背景颜色变为透明或白色？
到目前为止我编码的内容>
<!DOCTYPE html>
<html>
<head>
<title>Drawing Tools</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<script src="<?php echo base_url();?>assets/jquery/jquery.min.js"></script>
<link href="<?php echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.gm-style-cc {
display: none !important;
}
</style>
</head>
<body>
<div id="map"></div>
<div style="z-index: 0; position: absolute; top: 100px; left: 10px;">
<div class="card">
<div class="card-header" style='background-color:#2a3e42; color:white;text-align:center;'>
<h6>Layers Selection</h6>
</div>
<div class="card-body">
<button class='btn btn-block' id="Canvas" onclick="takepicture()">Canvastopdf</button>
</div>
</div>
</div>
<script>
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
},
markerOptions: {
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
function takepicture() {
document.querySelectorAll('[role="button"]').forEach(function (el) {
el.setAttribute('data-html2canvas-ignore', 'true');
});
var node = document.querySelector('[title="Toggle fullscreen view"]');
node.setAttribute('data-html2canvas-ignore', 'true');
var node = document.querySelector('[title="Drag Pegman onto the map to open Street View"]');
node.setAttribute('data-html2canvas-ignore', 'true');
var node = document.querySelector('[title="Drag Pegman onto the map to open Street View"]');
node.setAttribute('data-html2canvas-ignore', 'true');
var node = document.querySelector('[title="Zoom in"]');
node.setAttribute('data-html2canvas-ignore', 'true');
var node = document.querySelector('[title="Zoom out"]');
node.setAttribute('data-html2canvas-ignore', 'true');
var el = document.getElementById('map');
el.style.backgroundColor = '#fff';
// node.setAttribute('data-html2canvas-ignore', 'true');
html2canvas(document.getElementById("map"), {
background: '#fff',
allowTaint: false,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
//var img = canvas.toDataURL("image/jpeg,1.0");
var pdf = new jsPDF();
pdf.addImage(img, 'png', 15, 20, 90, 90);
pdf.save('a4.pdf')
}
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing&callback=initMap"
async defer></script>
我正在使用html2canvas打印Google地图，以获取地图的pdf。我已禁用背景图像，并在pdf中将以下图片Google谷歌地图绘制工具转换为pdf。我是什么...
因此，通过进行一些挖掘，我通过将tab-index 0的div的颜色更改为rgb（255,255,255）找到了答案。这是功能照相功能的更改代码，它将改变背景颜色白色