Google 地图 API 上的边界标记取自 JSON

Question

我在 google 地图中限制 Json 的标记有问题。该代码尝试读取 Json 的坐标，绘制标记和多段线，最后将地图居中。我认为问题出在接收绑定的坐标数组中。当我运行 API 时，标记和多段线在现场，但地图未居中。另外我有一个alert window 来查看数组的内容，结果如下：

(59.3,18.1),(59.9,10.8),(55.7,12.6),所以值是正确的。

(function() {
window.onload = function() {

// Creating an object literal containing the properties 
// we want to pass to the map  
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.HYBRID,
noClear: true,
//GUI
panControl: true,
scaleControl: false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
mapTypeControl: true,
zoomControl: false,
};

var map = new google.maps.Map(document.getElementById('map'), options);

// JSON
    var json = [
        {
            "title": "Stockholm",
            "lat": 59.3,
            "lng": 18.1,
        },
        {
            "title": "Oslo",
            "lat": 59.9,
            "lng": 10.8,
        },
        {
            "title": "Copenhagen",
            "lat": 55.7,
            "lng": 12.6,
        }
    ]
    var arr = []; 
    // Loop the JSON
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
        // Create the waypoints
        latLng = new google.maps.LatLng(data.lat, data.lng);

        arr.push(latLng);

        // Create the markers
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: data.title
        });
        //Polylines
        var flightPath = new google.maps.Polyline({
            path: json,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2,
            map:map
        }); 
    }
    //  Fit these bounds to the map
    alert(arr);
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < arr.length; i++) {
        bounds.extend(arr[i].getPosition());
    }
    map.fitBounds(bounds);
   };  
   })();

Answer 1

您的 for 循环不正确地扩展了边界。 latlon 对象没有 getPosition() 函数。像这样简单地扩展边界：

var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < arr.length; i++) {
    bounds.extend(arr[i]);
}

你可以看到它在这个 JS 中工作 Fiddle： https://jsfiddle.net/igor_9000/vhs6ppyg/

希望对您有所帮助！

Answer 2

我在您的代码中收到以下 javascript 错误：Uncaught TypeError: arr[i].getPosition is not a function。 google.maps.LatLng 没有 .getPosition 方法。

proof of concept fiddle

代码片段：

(function() {
  window.onload = function() {

    // Creating an object literal containing the properties 
    // we want to pass to the map  
    var options = {
      zoom: 3,
      center: new google.maps.LatLng(37.09, -95.71),
      mapTypeId: google.maps.MapTypeId.HYBRID,
      noClear: true,
      //GUI
      panControl: true,
      scaleControl: false,
      streetViewControl: false,
      overviewMapControl: false,
      rotateControl: false,
      mapTypeControl: true,
      zoomControl: false,
    };

    var map = new google.maps.Map(document.getElementById('map'), options);

    // JSON
    var json = [{
      "title": "Stockholm",
      "lat": 59.3,
      "lng": 18.1,
    }, {
      "title": "Oslo",
      "lat": 59.9,
      "lng": 10.8,
    }, {
      "title": "Copenhagen",
      "lat": 55.7,
      "lng": 12.6,
    }]
    var arr = [];
    // Loop the JSON
    for (var i = 0, length = json.length; i < length; i++) {
      var data = json[i],
        // Create the waypoints
        latLng = new google.maps.LatLng(data.lat, data.lng);

      arr.push(latLng);

      // Create the markers
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: data.title
      });
      //Polylines
      var flightPath = new google.maps.Polyline({
        path: json,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
      });
    }
    //  Fit these bounds to the map
    // alert(arr);
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < arr.length; i++) {
      bounds.extend(arr[i]);
    }
    map.fitBounds(bounds);
  };
})();

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

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

Google 地图 API 上的边界标记取自 JSON

Bound markers on Google maps API taken from a JSON

html

javascript

json

google-maps

marker