未捕獲InvalidValueError：不是LatLngBounds或LatLngBoundsLiteral：未知屬性f

Question

我正在使用Google地圖顯示多個位置，我想繪製它之間的路徑。我的道路是正確的，但顯示在控制檯中我得到這個錯誤

Uncaught InvalidValueError: not a LatLngBounds or LatLngBoundsLiteral: unknown property f

<script> 

var markers; 

function GetLocation() { 

    var id = document.getElementById("Code").value; 

    var request = $.ajax({ 
     url: "Path", 
     type: "GET", 
     data:"data="+id, 
     dataType: "html" 
    }); 
    request.done(function(json_data) { 
     // alert(json_data); 
     var obj = JSON.parse(json_data); 

     markers = obj; 

     if (obj[0].result == "Failed") 
     { 
      alert("No Location Found"); 
     }else{ 
      initialize(); 
     } 


    }); 
    request.fail(function(jqXHR, textStatus) { 
     alert("Request failed: " + textStatus); 
    }); 

    //The list of points to be connected 
    //google.maps.event.addDomListener(window, 'load', initialize); 

} 


      //var map = null; 
      var infowindow = new google.maps.InfoWindow(); 
      var bounds = new google.maps.LatLngBounds(); 
      // var map; 
      function initialize() { 
       var mapOptions = { 
        center: new google.maps.LatLng(
          parseFloat(markers[0].lat), 
          parseFloat(markers[0].lng)), 
        zoom: 15, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var service = new google.maps.DirectionsService(); 

       var infoWindow = new google.maps.InfoWindow(); 
       map = new google.maps.Map(document.getElementById("map"), mapOptions); 
       var lat_lng = new Array(); 

       var marker = new google.maps.Marker({ 
        position: map.getCenter(), 
        map: map, 
        draggable: true 
       }); 
       bounds.extend(marker.getPosition()); 
       google.maps.event.addListener(marker, "click", function(evt) { 
        // infowindow.setContent("Address:" + marker.getPosition().toUrlValue(7)); 
        infowindow.open(map, marker); 
       }); 
       for (var i = 0; i < markers.length; i++) { 
        if ((i + 1) < markers.length) { 
         var src = new google.maps.LatLng(parseFloat(markers[i].lat), 
           parseFloat(markers[i].lng)); 
         createMarker(src); 

         var des = new google.maps.LatLng(parseFloat(markers[i + 1].lat), 
           parseFloat(markers[i + 1].lng)); 
         createMarker(des); 
         // poly.setPath(path); 
         service.route({ 
          origin: src, 
          destination: des, 
          travelMode: google.maps.DirectionsTravelMode.DRIVING 
         }, function(result, status) { 
          if (status == google.maps.DirectionsStatus.OK) { 
           var path = new google.maps.MVCArray(); 
           var poly = new google.maps.Polyline({ 
            map: map, 
            strokeColor: '#F3443C' 
           }); 
           for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
            path.push(result.routes[0].overview_path[i]); 
           } 
           poly.setPath(path); 
           map.fitBounds(bounds); 
          } 
         }); 
        } 
       } 
      } 

      function createMarker(latLng) { 
       var marker = new google.maps.Marker({ 
        position: latLng, 
        map: map, 
        draggable: true 
       }); 
       bounds.extend(marker.getPosition()); 
       google.maps.event.addListener(marker, "click", function(evt) { 
        var address; 
        //      alert(this.getPosition().toUrlValue(6)); 

        var geocoder = new google.maps.Geocoder(); 
        geocoder.geocode({'latLng': this.position}, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 
          alert(results[0].formatted_address); 
          address = results[0].formatted_address; 
          infoWindow.setContent("Address:" + address); 
          infowindow.open(map, this); 
         } else { 
          alert('Geocoder failed due to: ' + status); 
         } 
        }); 


       }); 
      } 

</script> 

<div id='map'></div> 

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

Answer 1

問題：

1. 要異步加載API（與async defer），但沒有回調參數。
2. 在API加載之前，您正在創建bounds和infoWindow變量（它們是依賴於API的對象）。
3. 你被不同拼寫信息窗口對象（信息窗口，信息窗口），JavaScript是大小寫敏感的，那些是不同的變量
4. 您正在使用this回調用於地理編碼爲被點擊的標記內，則this地址解析器回調函數內將與點擊偵聽器回調中的this不同，您需要保存指向用於打開infowindow的標記的this。

proof of concept fiddle

代碼片段：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="Code" value="27" /> 
 
<script> 
 
    var markers = [{ 
 
    lat: 40.7127837, 
 
    lng: -74.0059413 
 
    }, { 
 
    lat: 40.735657, 
 
    lng: -74.1723667 
 
    }]; 
 

 
    function GetLocation() { 
 

 
    var id = document.getElementById("Code").value; 
 

 
    var request = $.ajax({ 
 
     url: "Path", 
 
     type: "GET", 
 
     data: "data=" + id, 
 
     dataType: "html" 
 
    }); 
 
    request.done(function(json_data) { 
 
     var obj = JSON.parse(json_data); 
 

 
     if (!obj || !obj[0]) { 
 
     initialize(); 
 
     } else if (obj[0].result == "Failed") { 
 
     alert("No Location Found"); 
 
     } else { 
 
     markers = obj; 
 
     initialize(); 
 
     } 
 
    }); 
 
    request.fail(function(jqXHR, textStatus) { 
 
     // alert("Request failed: " + textStatus); 
 
     initialize(); 
 
    }); 
 
    } 
 

 
    var infoWindow; 
 
    var bounds; 
 

 
    function initialize() { 
 
    infoWindow = new google.maps.InfoWindow(); 
 
    bounds = new google.maps.LatLngBounds(); 
 
    var mapOptions = { 
 
     center: new google.maps.LatLng(
 
     parseFloat(markers[0].lat), 
 
     parseFloat(markers[0].lng)), 
 
     zoom: 15, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var service = new google.maps.DirectionsService(); 
 

 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    var lat_lng = new Array(); 
 

 
    var marker = new google.maps.Marker({ 
 
     position: map.getCenter(), 
 
     map: map, 
 
     draggable: true 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 
    google.maps.event.addListener(marker, "click", function(evt) { 
 
     infowindow.open(map, marker); 
 
    }); 
 
    for (var i = 0; i < markers.length; i++) { 
 
     if ((i + 1) < markers.length) { 
 
     var src = new google.maps.LatLng(parseFloat(markers[i].lat), 
 
      parseFloat(markers[i].lng)); 
 
     createMarker(src); 
 

 
     var des = new google.maps.LatLng(parseFloat(markers[i + 1].lat), 
 
      parseFloat(markers[i + 1].lng)); 
 
     createMarker(des); 
 
     service.route({ 
 
      origin: src, 
 
      destination: des, 
 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
     }, function(result, status) { 
 
      if (status == google.maps.DirectionsStatus.OK) { 
 
      var path = new google.maps.MVCArray(); 
 
      var poly = new google.maps.Polyline({ 
 
       map: map, 
 
       strokeColor: '#F3443C' 
 
      }); 
 
      for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
 
       path.push(result.routes[0].overview_path[i]); 
 
      } 
 
      poly.setPath(path); 
 
      map.fitBounds(bounds); 
 
      } 
 
     }); 
 
     } 
 
    } 
 
    } 
 

 
    function createMarker(latLng) { 
 
    var marker = new google.maps.Marker({ 
 
     position: latLng, 
 
     map: map, 
 
     draggable: true 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 
    google.maps.event.addListener(marker, "click", function(evt) { 
 
     var address; 
 
     var that = this; 
 
     var geocoder = new google.maps.Geocoder(); 
 
     geocoder.geocode({ 
 
     'latLng': this.position 
 
     }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
      address = results[0].formatted_address; 
 
      infoWindow.setContent("Address:" + address); 
 
      infoWindow.open(map, that); 
 
     } else { 
 
      alert('Geocoder failed due to: ' + status); 
 
     } 
 
     }); 
 
    }); 
 
    } 
 
</script> 
 

 
<div id='map'></div> 
 

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