如何删除地图左上角的按钮?
How to remove the top left corner buttons of the map?
默认情况下,地图左上角有两个按钮 plan 和 satellite :
这是代码:
<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>
默认情况下,地图左上角有两个按钮 plan 和 satellite :
这是代码:
<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>