Question

我正在尝试获取一个简单的地图以加载到HTML页面上。我看到了所有导航功能，例如卫星/地图按钮，缩放按钮和街景下拉菜单，但没有渲染任何实际地图。关于可能引起短路的任何想法吗？

我尝试将代码简化为Google API文档中找到的最简单的版本，并且尝试了不同的API密钥。结果相同。

<style>
  #map {
    height: 400px;
    width: 100%;
    position: absolute;
  }
</style>

<div id="map"></div>

<script>
  function myMap() {
    let mapProp = {
      center: new google.maps.LatLng(51.508742, -0.12085),
      zoom: 5
    };
    let map = new google.maps.Map(document.getElementById('map'), mapProp);
  }
</script>

<script async
  defer src="https://maps.googleapis.com/maps/api/js?key=#######&callback=myMap"></script>

我希望会出现一个显示这些坐标的工作图。而是看到诸如卫星/地图按钮，缩放按钮和街景下拉菜单之类的导航功能，但未绘制任何实际地图。

Answer 1

有一些禁用导航功能的选项，例如卫星/地图按钮。这里是一个示例

zoom: 5,        
fullscreenControl: false,
minZoom: 2,
streetViewControl: false,
clickableIcons: false

另请参见[documentation] [1]

如果未渲染地图，则必须查看控制台..或共享控制台错误消息以及所获取内容的屏幕截图。

这里是完整的工作代码供您参考看到小提琴https://jsfiddle.net/s39pwz7q/

var myLatLng = new google.maps.LatLng(35.11111,-118.57056);
            var map = new google.maps.Map(document.getElementById("map"),
            {
                zoom: 10,
                center: myLatLng,
             //streetViewControl: false,
            fullscreenControl: false,
            mapTypeControl: false,
                 clickableIcons: false,
                 styles: [
                    {
                      "featureType": "administrative",
                      "elementType": "geometry",
                      "stylers": [
                        {
                          "visibility": "off"
                        }
                      ]
                    },
                    {
                      "featureType": "poi",
                      "stylers": [
                        {
                          "visibility": "off"
                        }
                      ]
                    },
                    {
                      "featureType": "road",
                      "elementType": "labels.icon",
                      "stylers": [
                        {
                          "visibility": "off"
                        }
                      ]
                    },
                    {
                      "featureType": "transit",
                      "stylers": [
                        {
                          "visibility": "off"
                        }
                      ]
                    }
                  ]
            });

            var marker = new google.maps.Marker(
            {
                position: myLatLng,
                map: map,
                title: "California Correctional Institution"
            });

Also there are some options which api does not give option to hide for that you can simply hide using css see below



    <style>
       .gm-style > button.gm-fullscreen-control{
         display:none;
        }
     </style>


  [1]: https://developers.google.com/maps/documentation/javascript/tutorial
  [2]: https://jsfiddle.net/s39pwz7q/

为什么Google Maps API的实际地图没有显示在页面上？

1 个答案: