我很擅长使用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();
}
})();
答案 0 :(得分：2)
bounds.extend调用放入标记循环中，并将标记的所有位置添加到其中：bounds.extend(marker.getPosition());
setMarkerPoints(map);
代码段
(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>
答案 1 :(得分：0)
以下项目中的一个功能是我为您的代码进行快速调整
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);
};
}