Question

我已经使用标记呈现map，这些标记在本地xlsx文件中保存为长lat值。我的目标是自动缩放到通过输入文件按钮加载的所有标记。为此，我使用fitbounds()中的googlemaps API方法。

部分示例

function handleFile(e) {

    //Get the files from Upload control
    var files = e.target.files;
    var i, f;

 //Loop through files
    for (i = 0, f = files[i]; i != files.length; ++i) {
        var reader = new FileReader();
        var name = f.name;
        reader.onload = function (e) {
            var data = e.target.result;

            var result;
            var workbook = XLSX.read(data, { type: 'binary' });

            var sheet_name_list = workbook.SheetNames;
            sheet_name_list.forEach(function (y) { /* iterate through sheets */
                //Convert the cell value to Json
                var roa = XLSX.utils.sheet_to_json(workbook.Sheets[y]);


                if (roa.length > 0) {
                    result = roa;

                }
            });

           //create global infoWindow object
           var infoWindow = new google.maps.InfoWindow();
           var i, newMarker;


 var gmarkers = [];

 //loop over json format 
 for (i = 0, length = result.length; i < length; i++) {
    var data = result[i];
    //extract Lat Long values from result
    latLng = new google.maps.LatLng(data.Latitude, data.Longitude);

    //creating a marker and putting it on the map
    newMarker = new  google.maps.Marker({
    position: latLng,
    map: map

    });

    gmarkers.push(newMarker);

    }

    for (var i=0; i < gmarkers.length; i++) {
        bounds = new google.maps.LatLngBounds();
        loc = new google.maps.LatLng(gmarkers[i].position.lat(), gmarkers[i].position.lng());
        bounds.extend(loc);         
    }

        map.fitBounds(bounds);

              }
           }

       }

    };
        reader.readAsArrayBuffer(f);

   }

但是如果我运行我的html文件，它只会缩放到一个标记。我想它是gmarkers数组的第一个标记。

但是我希望获得以下结果，包括我上传的标记的完整范围：

在我的main.html中，您可以看到我的initMap()函数以及文档准备好后调用的函数。在document ready函数中调用handlefunction ()。

 var map;
 //Change event to dropdownlist
 $(document).ready(function(){

    a = $('#input-id').fileinput({
        'showUpload': false,
        'showPreview': false,
        'showCaption': false

         });     

    a.change(handleFile);
});

function initMap() {                                            
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 48.7758459, lng: 9.1829321},
      zoom: 3,
      mapTypeControl: false

    });

  }

Answer 1

您的代码中有拼写错误。移动循环外边界的初始化。

for (var i=0; i < gmarkers.length; i++) {
    bounds = new google.maps.LatLngBounds();
    loc = new google.maps.LatLng(gmarkers[i].position.lat(), gmarkers[i].position.lng());
    bounds.extend(loc);         
}
map.fitBounds(bounds);

应该是：

bounds = new google.maps.LatLngBounds();
for (var i=0; i < gmarkers.length; i++) {
    loc = new google.maps.LatLng(gmarkers[i].position.lat(), gmarkers[i].position.lng());
    bounds.extend(loc);         
}
map.fitBounds(bounds);

proof of concept fiddle

代码段

＆＃13;

var result = [{
  Latitude: 37.4419,
  Longitude: -122.1419
}, {
  Latitude: 37.44,
  Longitude: -122.14
}, {
  Latitude: 40.44,
  Longitude: -75.14
}]

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var gmarkers = [];

  //loop over json format 
  for (i = 0, length = result.length; i < length; i++) {
    var data = result[i];
    //extract Lat Long values from result
    latLng = new google.maps.LatLng(data.Latitude, data.Longitude);

    //creating a marker and putting it on the map
    newMarker = new google.maps.Marker({
      position: latLng,
      map: map
    });
    gmarkers.push(newMarker);
  }
  bounds = new google.maps.LatLngBounds();

  for (var i = 0; i < gmarkers.length; i++) {
    loc = new google.maps.LatLng(gmarkers[i].position.lat(), gmarkers[i].position.lng());
    bounds.extend(loc);
  }

  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

＆＃13;

Answer 2

这是另一种方法，用于解决您的问题 35行代码。确保以正确的方式传递JSON对象，并在适当的词法范围内声明类。

确保 JSON对象返回如下内容：

    const coords = [
      {lat: 42.4, lng: 1.55},
      {lat: 43.42, lng: 2.48},
      {lat: 45.43, lng: 4.9}
    ];

注意我已将result更改为更有意义的coords对象数组。

// Create your markers without worrying about scope and without extensive For Loops

const markers = coords.map((coord) => {
    return new google.maps.Marker({
        position: new google.maps.LatLng(coord.lat, coord.lng),
        map: map,
        animation: google.maps.Animation.DROP
    });     
})

// Declare your bounds outside the map method (previous for loop)

const   bounds = new google.maps.LatLngBounds();

// Iterate through markers and return coords for expanded viewport

markers.forEach((loc) =>{
     loc = new google.maps.LatLng(loc.position.lat(), loc.position.lng());
    return bounds.extend(loc);
});

map.fitBounds(bounds);

}

方法fitBounds（）仅缩放到单个标记

2 个答案: