google-maps - 如何去掉地图左上角的按钮?
问题描述
默认情况下,地图左上角有两个按钮计划和卫星:
这是代码:
<script>
map = null;
poly = null;
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: -18.92379, lng: 47.542537},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
directionsDisplay.setMap(map);
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
document.getElementById('organisation').addEventListener('change', function() {
getFlotteByOrganisation(document.getElementById('organisation').value);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSJrLcMUVltUHcVjtC8ZotBshfiue8J68&callback=initMap"></script>
如何去掉这两个按钮?
解决方案
一种选择是禁用默认用户界面:
disableDefaultUI: true
重新添加街景控件和缩放控件(如果需要):
streetViewControl: true, // add back streetView control
zoomControl: true, // add back the zoom control
代码片段:
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<div id="map"></div>
<script>
map = null;
poly = null;
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: -18.92379,
lng: 47.542537
},
disableDefaultUI: true, // disable the default controls
streetViewControl: true, // add back streetView control
zoomControl: true, // add back the zoom control
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSJrLcMUVltUHcVjtC8ZotBshfiue8J68&callback=initMap"></script>
推荐阅读
- typescript - 将“jest”从依赖项移动到 devDependencies 后,Jest 测试开始失败
- sql - ORACLE如何应用CTAS与子分区?
- html - 如何在 Angular 中创建像 Facebook 帖子一样的照片网格?
- java - 错误:考虑在配置中定义“long”类型的 bean。“AtomicLong”springboot 问候语
- java - 我得到了一个可选对象,可能是null,那我们如何使用或判断呢?
- flutter - 错误:无法将参数类型“Type”分配给参数类型“Widget Function(BuildContext, MenuInfo, Widget?)”
- javascript - 哨兵源图上传问题 | 反应 JS
- r - R中相同维度的多个数组的标准偏差(和百分位数)
- javascript - 为什么在 Django 中更新我的 HTML 之前必须重新加载两次?
- flutter - 如何处理提供程序并重新创建一个新的提供程序 - Flutter 提供程序包