谷歌地图fitbounds错误（不能读取属性e3）

Question

我很新，以适应JSON点的界限，我正在努力与基于当前点的地图居中。

我最近的小提琴：http://jsfiddle.net/inkedraskal/3fchn090/9/

任何参考或建议将不胜感激。

我现在的JS是如下：

(function() { 

    window.onload = function() { 
     var start_point = new google.maps.LatLng(0, 0); 

     // Creating a new map 
     var map = new google.maps.Map(document.getElementById("map"), { 
      center: start_point, 
      zoom: 6, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 


     // Creating the JSON data 
     var json = [ 
      { 
       "title": "Stockholm", 
       "lat": 59.3, 
       "lng": 18.1, 
       "description": "<strong>Stockholm</strong> is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)" 
      }, 
      { 
       "title": "Oslo", 
       "lat": 59.9, 
       "lng": 10.8, 
       "description": "<strong>Oslo</strong> is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)." 
      }, 
      { 
       "title": "Copenhagen", 
       "lat": 55.7, 
       "lng": 12.6, 
       "description": "<strong>Copenhagen</strong> is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)." 
      } 
     ] 

     // Creating a global infoWindow object that will be reused by all markers 
     var infoWindow = new google.maps.InfoWindow(); 

     function setMarkerPoints(map){ 
      var bounds = new google.maps.LatLngBounds(); 
      // Looping through the JSON data 
      for (var i = 0, length = json.length; i < length; i++) { 
       var data = json[i], 
        latLng = new google.maps.LatLng(data.lat, data.lng); 

       // Creating a marker and putting it on the map 
       var marker = new google.maps.Marker({ 
        position: latLng, 
        map: map, 
        title: data.title 
       }); 

       // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) 
       (function(marker, data) { 

        var windowContent = '<h3>'+ data.title +'</h3>'+ 
             '<p>'+ data.description + '</p>' 
        console.log(windowContent); 

        // Attaching a click event to the current marker 
        //google.maps.event.addListener(marker, "click", function(e) { 
         //infoWindow.setContent(data.title + data.description); 
        // infoWindow.setContent(windowContent); 
        // infoWindow.open(map, marker); 
        //}); 
        infobox = new InfoBox({ 
         content: infoWindow.setContent(windowContent), 
         alignBottom: true, 
         pixelOffset: new google.maps.Size(-160, -45) 
        }); 

        google.maps.event.addListener(marker, 'click', function() { 

         // Open this map's infobox 
         infobox.open(map, marker); 
         infobox.setContent(windowContent); 
         map.panTo(marker.getPosition()); 
         infobox.show(); 
        }); 
        google.maps.event.addListener(map, 'click', function() { 
         infobox.setMap(null); 
        }); 


       })(marker, data); 
       //END MARKER DATA 

      } 
      // end loop through json 
      bounds.extend(start_point); 
      map.setCenter(start_point); 
      map.fitBounds(bounds); 
     } 

     setMarkerPoints(); 



    } 

})(); 

Answer 1

1. 把bounds.extend呼叫标记内部函数循环并将标记的所有位置添加到其中：

bounds.extend(marker.getPosition()); 

你必须在调用setMarkers一个错字，则需要在地图传递到该函数：

setMarkerPoints(map); 

updated fiddle

code code snippet：

(function() { 
 

 
    window.onload = function() { 
 
    var start_point = new google.maps.LatLng(0, 0); 
 

 
    // Creating a new map 
 
    var map = new google.maps.Map(document.getElementById("map"), { 
 
     center: start_point, 
 
     zoom: 6, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 

 
    // Creating the JSON data 
 
    var json = [{ 
 
     "title": "Stockholm", 
 
     "lat": 59.3, 
 
     "lng": 18.1, 
 
     "description": "<strong>Stockholm</strong> is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)" 
 
    }, { 
 
     "title": "Oslo", 
 
     "lat": 59.9, 
 
     "lng": 10.8, 
 
     "description": "<strong>Oslo</strong> is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)." 
 
    }, { 
 
     "title": "Copenhagen", 
 
     "lat": 55.7, 
 
     "lng": 12.6, 
 
     "description": "<strong>Copenhagen</strong> is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)." 
 
    }]; 
 

 
    // Creating a global infoWindow object that will be reused by all markers 
 
    var infoWindow = new google.maps.InfoWindow(); 
 

 
    function setMarkerPoints(map) { 
 
     var bounds = new google.maps.LatLngBounds(); 
 
     // Looping through the JSON data 
 
     for (var i = 0, length = json.length; i < length; i++) { 
 
     var data = json[i], 
 
      latLng = new google.maps.LatLng(data.lat, data.lng); 
 

 
     // Creating a marker and putting it on the map 
 
     var marker = new google.maps.Marker({ 
 
      position: latLng, 
 
      map: map, 
 
      title: data.title 
 
     }); 
 

 
     // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) 
 
     (function(marker, data) { 
 

 
      var windowContent = '<h3>' + data.title + '</h3>' + 
 
      '<p>' + data.description + '</p>'; 
 
      console.log(windowContent); 
 

 
      // Attaching a click event to the current marker 
 
      infobox = new InfoBox({ 
 
      content: infoWindow.setContent(windowContent), 
 
      alignBottom: true, 
 
      pixelOffset: new google.maps.Size(-160, -45) 
 
      }); 
 

 
      google.maps.event.addListener(marker, 'click', function() { 
 

 
      // Open this map's infobox 
 
      infobox.open(map, marker); 
 
      infobox.setContent(windowContent); 
 
      map.panTo(marker.getPosition()); 
 
      infobox.show(); 
 
      }); 
 
      google.maps.event.addListener(map, 'click', function() { 
 
      infobox.setMap(null); 
 
      }); 
 
     })(marker, data); 
 
     //END MARKER DATA 
 
     bounds.extend(marker.getPosition()); 
 
     } 
 
     // end loop through json 
 

 
     map.setCenter(start_point); 
 
     map.fitBounds(bounds); 
 
    } 
 
    setMarkerPoints(map); 
 
    }; 
 
})();

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#map { 
 
    display: block; 
 
    height: 100%; 
 
} 
 
.infoBox { 
 
    max-width: 300px; 
 
    background: #fff; 
 
    padding: 10px; 
 
    border: 1px solid red; //so pilot red 
 
    img { 
 
    border: 1px solid yellow; 
 
    } 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
 
<div id="map"></div>

Answer 2

继承人从以前的项目，我的工作与快速调整您的代码

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