Question

我正在尝试学习如何使用Google Maps API，并且我找到了很多很好的教程。问题是，每当我尝试将他们的代码实现到我的本地HTML文件中时，我都看不到在我的Google地图上绘制的任何折线。

这是我的代码（注意：我的底部脚本中有我的API密钥）：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>

    <script type="text/javascript">
        var map;
        function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 55.500, lng: 9.000},
            zoom: 10
          });
        }

        var encoded_data = "kpgiI}{wt@{xeDfxv@ylqC|flAyfyDidPiioBoabD_fkAyjfDooZ{nyCtw_BihCnzlBzbyAl}XehjBfp`B_se@vdgAhdPya_BoabDipHoabDngiAsen@jz}@htcAzqt@itcAnha@|~eBdzh@qqnBf~w@zrlCjkx@fppAy{u@zflA{zRpeuC`zWh`]bmx@}byAlwn@ny{DncNn}nDsxd@uqG";
        var decode = google.maps.geometry.encoding.decodePath(encoded_data);

        var line = new google.maps.Polyline({
          path: decode,
          strokeColor: '#00008B',
          strokeOpacity: 1.0,
          strokeWeight: 4,
          zIndex: 3
        });

        line.setMat(map);
        lineArray.push(line);
    </script>
  </head>
  <body>
    <div id="map"></div>

    <script async defer
      src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=MY_KEY&callback=initMap">
    </script>
  </body>
</html>

Answer 1

您正在使用以下网址加载Google Maps API：

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

，其中

async属性允许浏览器呈现您网站的其余部分加载Maps API时。当API准备就绪时，它会调用使用callback参数
指定的函数

在提供的示例中，您尝试使用google.maps.geometry.encoding.decodePath函数，但此时无法加载geometry库。

行上有一个拼写错误：

line.setMat(map); -> line.setMap(map);

已修复示例

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 55.500, lng: 9.000 },
        zoom: 7

    });

    var encoded_data = "kpgiI}{wt@{xeDfxv@ylqC|flAyfyDidPiioBoabD_fkAyjfDooZ{nyCtw_BihCnzlBzbyAl}XehjBfp`B_se@vdgAhdPya_BoabDipHoabDngiAsen@jz}@htcAzqt@itcAnha@|~eBdzh@qqnBf~w@zrlCjkx@fppAy{u@zflA{zRpeuC`zWh`]bmx@}byAlwn@ny{DncNn}nDsxd@uqG";
    var decode = google.maps.geometry.encoding.decodePath(encoded_data);

    var line = new google.maps.Polyline({
        path: decode,
        strokeColor: '#00008B',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        zIndex: 3
    });

    line.setMap(map);
}

 html, body {
            height: 100%;
            margin: 0;
            padding: 0;
}

#map {
    height: 100%;
}

<div id="map"></div>
<script async defer
            src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&callback=initMap">
</script>

Google Maps API不绘制折线

1 个答案: