javascript - 未捕获的 InvalidValueError : not a LatLngBounds or LatLngBoundsLiteral: unknown property f

Question

我正在使用谷歌地图显示多个位置，我想在它们之间绘制路径。我的路径显示正确，但在控制台我收到此错误

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. 您对 InfoWindow 对象的拼写不同(infoWindow、infowindow)，javascript 区分大小写，它们是不同的变量
4. 您正在点击标记的地理编码器回调中使用 this，地理编码器回调函数中的 this 将不同于 this 在点击监听器回调中，您需要保存指向用于打开信息窗口的标记的 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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>