尝试在 Google 地图上映射点并收到错误(未处理的异常)

Trying to map points on Google Maps and getting an error (Unhandled exception)

本文关键字:错误 未处理 异常 Google 地图 映射      更新时间:2023-09-26

我在谷歌地图上找到了一个关于地图点的例子,我正在尝试根据我的需求对其进行更改。现在,这就是我所拥有的:

$(function() {
        var allLatlng = []; //returned from the API
        var allMarkers = []; //returned from the API
        var marketName = []; //returned from the API
        var infowindow = null;
        var tempMarkerHolder = [];

        //map options
        var mapOptions = {
            zoom: 5,
            center: new google.maps.LatLng(37.09024, -100.712891),
            panControl: false,
            panControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_LEFT
            },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.RIGHT_CENTER
            },
            scaleControl: false
        };
    //Adding infowindow option
    infowindow = new google.maps.InfoWindow({
        content: "holding..."
    });
    //Fire up Google maps and place inside the map-canvas div
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    //grab form data
    $('#chooseZip').submit(function() { // bind function to submit event of form
        //define and set variables
        var userZip = $("#textZip").val();
        //console.log("This-> " + userCords.latitude);
        //var data = '<%=data%>';
        var data = ["trk1,26.2486591339111,-80.2002334594727", "trk2,26.2344417572021,-80.1393356323242", "trk3,26.0818271636963,-80.2083358764648", "trk4,26.2701854705811,-80.1152496337891"];
        var counter = 0;
        for (var key in data) {
            var results = data[key];  
            var split = results.split(',');
            //covert values to floats, to play nice with .LatLng() below.
            var latitude = parseFloat(split[0]);
            var longitude = parseFloat(split[1]);
            //set the markers.    
            myLatlng = new google.maps.LatLng(latitude, longitude);
            allMarkers = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: name,
                html:
                    '<div class="markerPop">' +
                        '<h1>' + name + '</h1>' + 
                     '</div>'
            });
            //put all lat long in array
            allLatlng.push(myLatlng);
            //Put the marketrs in an array
            tempMarkerHolder.push(allMarkers);
            counter++;
            //console.log(counter);
        };
        google.maps.event.addListener(allMarkers, 'click', function() {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });

        //console.log(allLatlng);
        //  Make an array of the LatLng's of the markers you want to show
        //  Create a new viewpoint bound
        var bounds = new google.maps.LatLngBounds();
        //  Go through each...
        for (var i = 0, LtLgLen = allLatlng.length; i < LtLgLen; i++) {
            //  And increase the bounds to take this point
            bounds.extend(allLatlng[i]);
        }
        //  Fit these bounds to the map
        map.fitBounds(bounds);
        return false; // important: prevent the form from submitting
    });
});

当它到达map.fitBounds时,我收到以下消息:

Unhandled exception at line 36, column 40 in https://maps.googleapis.com/maps/api/js?key=
0x800a001c - JavaScript runtime error: Out of stack space

原始代码运行良好,但我替换了数据源并插入了我自己的数组。循环运行正常,但我收到此错误。

你的代码中有拼写错误:

//covert values to floats, to play nice with .LatLng() below.
var latitude = parseFloat(split[0]);
var longitude = parseFloat(split[1]);

应该是(split[0] 是一个字符串(:

//covert values to floats, to play nice with .LatLng() below.
var latitude = parseFloat(split[1]);
var longitude = parseFloat(split[2]);

概念验证小提琴

代码片段:

$(function() {
  var allLatlng = []; //returned from the API
  var allMarkers = []; //returned from the API
  var marketName = []; //returned from the API
  var infowindow = null;
  var tempMarkerHolder = [];
  //map options
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(37.09024, -100.712891),
    panControl: false,
    panControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_LEFT
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE,
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    scaleControl: false
  };
  //Adding infowindow option
  infowindow = new google.maps.InfoWindow({
    content: "holding..."
  });
  //Fire up Google maps and place inside the map-canvas div
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  //grab form data
  // $('#chooseZip').submit(function() { // bind function to submit event of form
  //define and set variables
  // var userZip = $("#textZip").val();
  //console.log("This-> " + userCords.latitude);
  //var data = '<%=data%>';
  var data = ["trk1,26.2486591339111,-80.2002334594727", "trk2,26.2344417572021,-80.1393356323242", "trk3,26.0818271636963,-80.2083358764648", "trk4,26.2701854705811,-80.1152496337891"];
  var counter = 0;
  for (var key in data) {
    var results = data[key];
    var split = results.split(',');
    //covert values to floats, to play nice with .LatLng() below.
    var latitude = parseFloat(split[1]);
    var longitude = parseFloat(split[2]);
    //set the markers.    
    myLatlng = new google.maps.LatLng(latitude, longitude);
    allMarkers = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: name,
      html: '<div class="markerPop">' +
        '<h1>' + name + '</h1>' +
        '</div>'
    });
    //put all lat long in array
    allLatlng.push(myLatlng);
    //Put the marketrs in an array
    tempMarkerHolder.push(allMarkers);
    counter++;
    //console.log(counter);
  };
  google.maps.event.addListener(allMarkers, 'click', function() {
    infowindow.setContent(this.html);
    infowindow.open(map, this);
  });
  //console.log(allLatlng);
  //  Make an array of the LatLng's of the markers you want to show
  //  Create a new viewpoint bound
  var bounds = new google.maps.LatLngBounds();
  //  Go through each...
  for (var i = 0, LtLgLen = allLatlng.length; i < LtLgLen; i++) {
    //  And increase the bounds to take this point
    bounds.extend(allLatlng[i]);
  }
  //  Fit these bounds to the map
  map.fitBounds(bounds);
  return false; // important: prevent the form from submitting
  // });
});
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>