未捕获的类型错误：无法读取未定义 Google 地图的属性“应用”答案

【问题标题】：Uncaught TypeError: Cannot read property 'apply' of undefined Google Maps未捕获的类型错误：无法读取未定义 Google 地图的属性“应用”
【发布时间】：2017-02-28 20:58:46
【问题描述】：

我正在使用 Google 地图在地图上制作标记，并尝试使用以下代码将地址转换为地理编码：

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

<script type="text/javascript">
var map;

 function initialize() {
   var chamberLocation = {lat: 43, lng: -82};
   var geocoder = new google.maps.Geocoder();
   map = new google.maps.Map(document.getElementById('map'), {
     center: {lat: 42.9745, lng: -82.4066},
     zoom: 14,
     styles: [{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"hue":149},{"saturation":-78},{"lightness":0}]},{"featureType":"road.highway","stylers":[{"hue":-31},{"saturation":-40},{"lightness":2.8}]},{"featureType":"poi","elementType":"label","stylers":[{"visibility":"off"}]},{"featureType":"landscape","stylers":[{"hue":163},{"saturation":-26},{"lightness":-1.1}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"water","stylers":[{"hue":3},{"saturation":-24.24},{"lightness":-38.57}]}],
     zoomControl: false,
     scaleControl: false,
     mapTypeControl: false,
     disableDefaultUI: false,
     streetViewControl: false,
     rotateControl: false,
     scrollwheel: false,
     draggable: false
   });
   codeAddress(geocoder, map);

   }

   function codeAddress(geocoder, map) {
       var address = 'place';
       geocoder.geocode({ 'address' : address }), function(results, status) {
           if (status == google.maps.GeocoderStatus.OK) {
               var marker = new google.maps.Marker({
                   map: map,
                   position: results[0].geometry.location
               });
           } else {
               console.log('This didnt work' + status);
           }
       };
   }


</script>

每当我这样做时，我都会收到一条错误消息Uncaught TypeError: Cannot read property 'apply' of undefined

是什么导致了这个错误？我不确定如何解决这个问题。我是否必须导入另一个 google maps api？

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

错误是一个错字。我把代码放在下面，并在错字所在的地方评论了//change。 geocoder.geocode({}, callback) 是一个接受对象和回调的函数，但你有geocoder.geocode({ 'address' : address })，错字是) 它应该是geocoder.geocode({ 'address' : address }, function(results, status) { ...

<div id="map" style="width: 320px; height: 480px;"></div>

  <script type="text/javascript">
    var map;

    function initialize() {
      // your code 
      // etc ... 
      codeAddress(geocoder, map);
    }

    function codeAddress(geocoder, map) {
      var address = 'place';
      geocoder.geocode({
          'address': address
        }, // change
        function(results, status) {
          if (status == 'OK') { // change

            var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
            });

            // some debug output
            console.log("status is: " + status)
            console.log("results is: " + JSON.stringify(results[0].geometry.location))
          } else {
            console.log('This didnt work' + status);
          }
        });
    };
  </script>

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

【讨论】：

如果我使用async/await 而不是回调呢？在那种情况下我该如何编写回调函数？

【解决方案2】：

今天我在使用距离矩阵库时也遇到了同样的错误，我们只需使用这里提到的回调函数https://developers.google.com/maps/documentation/javascript/distancematrix

根据这个文档https://developers.google.com/maps/documentation/javascript/examples/distance-matrix#maps_distance_matrix-typescript 我在遇到上述错误时正在使用 Promise

var origin1 = new google.maps.LatLng(55.930385, -3.118425);
var origin2 = 'Greenwich, England';
var destinationA = 'Stockholm, Sweden';
var destinationB = new google.maps.LatLng(50.087692, 14.421150);

var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
  {
    origins: [origin1, origin2],
    destinations: [destinationA, destinationB],
    travelMode: 'DRIVING',
    transitOptions: TransitOptions,
    drivingOptions: DrivingOptions,
    unitSystem: UnitSystem,
    avoidHighways: Boolean,
    avoidTolls: Boolean,
  }, callback);

function callback(response, status) {
  // See Parsing the Results for
  // the basics of a callback function.
  console.log(status);
  console.log(response);
}

【讨论】：