如何删除地图的左上角按钮?

时间:2019-06-03 12:44:40

标签: google-maps google-maps-api-3

默认情况下,地图左上角有两个按钮 plan satellite

enter image description here

这是代码:

<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>

如何删除这两个按钮?

1 个答案:

答案 0 :(得分:2)

一个选项是禁用默认用户界面:

Array
(
    [0] => Array
        (
            [0] => key1:val1;
            [1] => key2:val2;
            [2] => key3:val3
        )

    [1] => Array
        (
            [0] => key1
            [1] => key2
            [2] => key3
        )

    [2] => Array
        (
            [0] => val1
            [1] => val2
            [2] => val3
        )

)
Array
(
    [0] => Array
        (
            [0] => key1:val1;
            [1] => key2:val2;
            [2] => key3:val3;
        )

    [1] => Array
        (
            [0] => key1
            [1] => key2
            [2] => key3
        )

    [2] => Array
        (
            [0] => val1
            [1] => val2
            [2] => val3
        )

)

重新添加街景控件和缩放控件(如果需要):

disableDefaultUI: true

screenshot of resulting map

代码段:

streetViewControl: true, // add back streetView control
zoomControl: true, // add back the zoom control
html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}