码

<!DOCTYPE html>
<html>
  <head>
    <style>

      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

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

    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(
          document.getElementById('map'),{
          zoom: 7,
          center: new google.maps.LatLng(31.9, 35.8),
          mapTypeId: 'terrain'});


        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        //var markers = locations.map(function(location, i) {
        //  return new google.maps.Marker({
        //    position: location,
        //    label: labels[i % labels.length]
        //  });
        //  });
      }
      //jordan states locations
      var locations =  [
                           [31.8354533  , 35.6674337 ],
                           [ 31.186446  , 35.6248844 ],
                           [ 30.8071736 , 35.5228078 ],
                           [ 32.0522945 , 35.9935951 ],
                           [ 31.7157524 , 35.7633807 ],
                           [ 32.0321557 , 35.655972  ],
                           [ 32.3402518 , 36.1527321 ],
                           [ 32.2699656 , 35.824437  ],
                           [ 32.3415654 , 35.7322292 ],
                           [ 32.5525113 , 35.81239   ],
                           [ 30.2200923 , 35.5467541 ],
                           [ 29.5809744 , 34.9350487 ] 
                       ]        


      for (var i = 0; i < locations.length; i++) {
         // var coords = locations[i];
          var latLng = new google.maps.LatLng(croods[0],croods[1]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }

    </script>

  </body>
</html>

Answer 1

当您异步加载API时（使用async defer），您需要全部依赖于回调函数（initMap）内的API的代码。目前，将标记放在地图上的代码不在该函数之内。

（一旦解决了这个问题，你就会遇到一些错误：Uncaught ReferenceError: croods is not defined）

proof of concept fiddle

代码段

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZInPKXBMPYpDNRGJwjGqJb6MRGog_haU&callback=initMap"></script>
<script>
  var map;

  function initMap() {
    map = new google.maps.Map(
      document.getElementById('map'), {
        zoom: 7,
        center: new google.maps.LatLng(31.9, 35.8),
        mapTypeId: 'terrain'
      });


    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    //var markers = locations.map(function(location, i) {
    //  return new google.maps.Marker({
    //    position: location,
    //    label: labels[i % labels.length]
    //  });
    //  });

    //jordan states locations
    var locations = [
      [31.8354533, 35.6674337],
      [31.186446, 35.6248844],
      [30.8071736, 35.5228078],
      [32.0522945, 35.9935951],
      [31.7157524, 35.7633807],
      [32.0321557, 35.655972],
      [32.3402518, 36.1527321],
      [32.2699656, 35.824437],
      [32.3415654, 35.7322292],
      [32.5525113, 35.81239],
      [30.2200923, 35.5467541],
      [29.5809744, 34.9350487]
    ]
    for (var i = 0; i < locations.length; i++) {
      var coords = locations[i];
      var latLng = new google.maps.LatLng(coords[0], coords[1]);
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }
  }

</script>

谷歌未定义，标记不会出现

码

1 个答案: