Javascript Google Maps API v3在地图类型设置为混合时不绘制地图_Javascript_Google Maps_Google Maps Api 3

Javascript Google Maps API v3在地图类型设置为混合时不绘制地图

javascript google-maps google-maps-api-3

Javascript Google Maps API v3在地图类型设置为混合时不绘制地图,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,在mapTypeId设置为hybrid的情况下绘制此地图时，它会绘制标记，但不会绘制地图。如果我将其设置为任何其他类型，地图将绘制另外，如果我点击F12打开开发者工具，地图就会绘制出来谁能告诉我我做错了什么。提前感谢你的帮助 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> &l

在mapTypeId设置为hybrid的情况下绘制此地图时，它会绘制标记，但不会绘制地图。如果我将其设置为任何其他类型，地图将绘制

另外，如果我点击F12打开开发者工具，地图就会绘制出来

谁能告诉我我做错了什么。提前感谢你的帮助

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Hybrid Map</title>
    <style>
      #map { height: 100%; }
      html, body { height: 100%; margin: 0; padding: 0; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      function initMap() {
        var myLatLng = {lat: 42.31391, lng: -83.2032224};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng,
          mapTypeId: 'hybrid'
        });

        var markerBounds = new google.maps.LatLngBounds();

        var markJson = [
        {Latitude: "42.34383937323032", Longitude: "-83.17619508650093", Accuracy: "24.0", Time: "09/08/2018 06:26:12"},
        {Latitude: "42.34386827380892", Longitude: "-83.17627864355015", Accuracy: "12.0", Time: "09/08/2018 06:26:14"},
        {Latitude: "42.343853008205535", Longitude: "-83.1763372997278", Accuracy: "4.0", Time: "09/08/2018 06:26:21"},
        {Latitude: "42.34387834632138", Longitude: "-83.1763972853329", Accuracy: "4.0", Time: "09/08/2018 06:26:47"},
        {Latitude: "42.343924132536046", Longitude: "-83.1763958907264", Accuracy: "6.0", Time: "09/08/2018 06:26:58"},
        {Latitude: "42.343914870976725", Longitude: "-83.17646834553283", Accuracy: "16.0", Time: "09/08/2018 06:27:10"},
        {Latitude: "42.34387223953695", Longitude: "-83.17649826835593", Accuracy: "16.0", Time: "09/08/2018 06:27:13"}
        ];

        markJson.forEach(function(item, index) {
            var newLatLng = new google.maps.LatLng(item.Latitude, item.Longitude);

            var marker = new google.maps.Marker({
            position: newLatLng,
            map: map
            });
            markerBounds.extend(marker.position);
        });     

        google.maps.event.addListenerOnce(map, "idle", function () {
            map.fitBounds(markerBounds);
    });
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
  </body>
</html>


混合地图
#地图{高度：100%；}
html，正文{高度：100%；边距：0；填充：0；}
函数initMap（）{
var Mylatng={lat:42.31391，lng:-83.2032224}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：myLatLng，
mapTypeId:'混合'
});
var markerBounds=new google.maps.LatLngBounds（）；
var markJson=[
{纬度：“42.34383937323032”，经度：“-83.17619508650093”，准确度：“24.0”，时间：“09/08/2018 06:26:12”}，
{纬度：“42.34386827380892”，经度：“-83.17627864355015”，准确度：“12.0”，时间：“09/08/2018 06:26:14”}，
{纬度：“42.343853008205535”，经度：“-83.1763372997278”，准确度：“4.0”，时间：“09/08/2018 06:26:21”}，
{纬度：“42.34387834632138”，经度：“-83.1763972853329”，准确度：“4.0”，时间：“09/08/2018 06:26:47”}，
{纬度：“42.34392413253646”，经度：“-83.1763958907264”，准确度：“6.0”，时间：“09/08/2018 06:26:58”}，
{纬度：“42.343914870976725”，经度：“-83.17646834553283”，准确度：“16.0”，时间：“09/08/2018 06:27:10”}，
{纬度：“42.3438723953695”，经度：“-83.17649826835593”，准确度：“16.0”，时间：“09/08/2018 06:27:13”}
];
forEach（函数（项、索引）{
var newLatLng=newgoogle.maps.LatLng（item.Latitude，item.Longitude）；
var marker=new google.maps.marker({
职位：newLatLng，
地图：地图
});
标记边界延伸（标记位置）；
});     
google.maps.event.addListenerOnce（映射，“空闲”，函数（）{
地图边界（markerBounds）；
});
}

您的脚本标记中没有添加API密钥：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=[API KEY]&callback=initMap"></script>

你可以在这里找到一个：

无论什么原因，当谷歌地图执行fitBounds时，它将缩放级别设置为22。在世界上的这个位置，谷歌地图没有缩放级别为22的图像。在将maxZoom设置为21的情况下初始化贴图会导致此实例中出现问题

    var map = new google.maps.Map(document.getElementById('map'), {
        maxZoom: 21,
        center: myLatLng,
        mapTypeId: 'hybrid'
    });

Google maps还提供了一个getMaxZoomAtLatLng函数，用于查找特定纬度和经度的最大缩放级别。

在发布之前，我实际上已经摆弄了它，并看到它也在那里工作。但它在浏览器中不起作用。你能在你选择的浏览器中试试吗？在一个本地文件上，在IE11中工作，在Chrome67和Firefox52.9中展示了这个问题。你在使用哪种浏览器？我在Chrome68、Edge 38和Firefox62中看到了问题。没有在IE中尝试：）我的代码使用密钥。当我分享密码时，我拔出了钥匙。我还测试了我在没有密钥的情况下发布的代码，它只是抛出了一个控制台错误。