2

Googleマップにマーカーを入力するためにJSONファイルを読み込んでいます。

静的な中心点ではなく、動的な中心点を持つ方法を見つけようとしています。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/

もう一度ありがとう、どんな助けでも大歓迎です。

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 に答える