javascript - Google maps api 3 json - 创建动态中心点

Question

我正在加载一个 JSON 文件以填充 Google map 上的标记。

我正在尝试找出一种可以拥有动态中心点而不是静态中心点的方法，有没有一种方法可以通过 bounds 方法做到这一点？

这是我目前所拥有的。

<pre>
<!-- language: lang-js -->
<script type="text/javascript">

var map;
var arrMarkers = [];
var arrInfoWindows = [];

function mapInit() {
    var centerCoord = new google.maps.LatLng(18.23, -66.39); // Puerto Rico
    var mapOptions = {
        zoom: 9,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    $.getJSON("map.json", {}, function (data) {
        $.each(data.places, function (i, item) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(item.lat, item.lng),
                map: map,
                title: item.title
            });
            arrMarkers[i] = marker;
            var infowindow = new google.maps.InfoWindow({
                content: "<h3>" + item.title + "</h3><p>" + item.description + "</p>"
            });
            arrInfoWindows[i] = infowindow;
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
        });
    });
}
$(function () {
    // initialize map (create markers, infowindows and list)
    mapInit();
}); < /script>

</pre>

示例在这里。 http://thirstythursdays.co.uk/google-maps-native2/

再次感谢，非常感谢任何帮助。

Answer 1

您可以按以下方式执行此操作。

var map;
var arrMarkers = [];
var arrInfoWindows = [];

function mapInit() {
    var centerCoord = new google.maps.LatLng(18.23, -66.39); // Puerto Rico
    var mapOptions = {
        zoom: 9,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    // Declare your bounds
    var bounds = new google.maps.LatLngBounds();

    $.getJSON("map.json", {}, function (data) {
        $.each(data.places, function (i, item) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(item.lat, item.lng),
                map: map,
                title: item.title
            });

            // Declare lat/long 
        var latlng = new google.maps.LatLng(item.lat, item.lng);

        // Add lat/long to bounds
        bounds.extend(latlng);

            arrMarkers[i] = marker;
            var infowindow = new google.maps.InfoWindow({
                content: "<h3>" + item.title + "</h3><p>" + item.description + "</p>"
            });
            arrInfoWindows[i] = infowindow;
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });
        });
    });

    // Fit map to bounds.
     map.fitBounds(bounds); 
}