2

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

我试图找出一种方法，我可以拥有一个动态中心点，而不是让它静态，有没有一种方法可以通过边界方法做到这一点？

这是我到目前为止所拥有的。

<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/

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

4

2 回答 2

3

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

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); 
}
于 2013-03-22T14:19:12.400 回答
0

将所有点添加到 google.maps.LatLngBounds 对象，在结果边界上调用 map.fitBounds。（未测试）

$.getJSON("map.json", {}, function(data){
var bounds = new google.maps.LatLngBounds();
  $.each(data.places, function(i, item){
    //$("#markers").append('<li><a href="#" rel="' + i + '">' + item.title + '</a></li>');
var latlng = new google.maps.LatLng(item.lat, item.lng);
bounds.extend(latlng);
            var marker = new google.maps.Marker({
                position: latlng,
                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);
            });
        });
    map.fitBounds(bounds);
    });
}

例子

于 2013-03-22T14:17:45.633 回答