Question

我的代码中有fitBounds问题。无论我将extend.bounds和fitBounds放在createMarker函数还是getData函数中，我都会得到“未定义的边界”。现在我已经注释掉了边界语句，但你可以看到我在哪里尝试它们。

google.load('visualization', '1', {'packages':['table']});
    console.log("right after google load")
    var map;
    var markers = [];
    var infoWindow = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds ();

    var gicons = [];
        gicons[1] = new google.maps.MarkerImage('http://6tango.com/MLH/Map_Icons/flower_blue_shadow.png');
        gicons[2] = new google.maps.MarkerImage('http://6tango.com/MLH/Map_Icons/flower_yellow_shadow.png');
        gicons[3]  = new google.maps.MarkerImage('http://6tango.com/MLH/Map_Icons/flower_green_shadow.png');

    var tinyicon = [];
        tinyicon[1] = 'http://6tango.com/MLH/Map_Icons/flower_blue_small.png';
        tinyicon[2] = 'http://6tango.com/MLH/Map_Icons/flower_yellow_small.png';
        tinyicon[3] = 'http://6tango.com/MLH/Map_Icons/flower_green_small.png';

function initialize(bounds) {
    console.log("initialize function")
        var ca = new google.maps.LatLng(33.75,-117.9);

        map = new google.maps.Map(document.getElementById('map'), {
            center: ca,
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,

        overviewMapControl: false,  
        overviewMapControlOptions: {
            opened: true
        }
    });

    var sql = encodeURIComponent("SELECT * FROM 1O8mQ6csgl4gapp6uzW-  OjUtRK05eTRiB8oCc5DY");
        var query = new   google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + sql);

    query.send(getData);
}

function getData(response,bounds) {
    console.log("function getData")

    var dt = response.getDataTable();  

        var side_html = '<table >';

        for (var i = 0; i < dt.getNumberOfRows(); i++) {
        var lat = dt.getValue(i,5);
        var lng = dt.getValue(i,6);
        var icontype = dt.getValue(i,0);
    var name = dt.getValue(i,1);
    var a1 = dt.getValue(i,2);
    var a2 = dt.getValue(i,3);
    var address = dt.getValue(i,4);
    var cross = dt.getValue(i,7);
        var map = dt.getValue(i,8);
        var photo = dt.getValue(i,9);
    var t1 = dt.getValue(i,10);
    var t2 = dt.getValue(i,11);
    var t3 = dt.getValue(i,12);
    var t4 = dt.getValue(i,13);
    var t5 = dt.getValue(i,14);
    var t6 = dt.getValue(i,15);
    var handicap = dt.getValue(i,16);

    var pt = new google.maps.LatLng(lat, lng);
    //bounds.extend(pt);
    //map.fitBounds(bounds);


        var html = [

            '<div style="width:500px;height:100%;border:1px solid;background-color:#f0f0f0"><div style="float:left;width:188px;padding:3px"><p><b>',
            name + '</b><br>',
            a1 + '<br>',
            a2 + '</p><p><b>C/S - Directions:</b><br>',
            cross + '</p><p><b>Thomas Guide: </b>',
            map +  '</p><p><img src="http://kk6t.com/images/handicap_mlh.png">',
            handicap + '</p></div>',
            '<div style="float:left;padding:5px 5px 2px 5px;margin:2px 2px 0 0;border:1px solid black;background-color:#ffffff"><img src="',
            photo + '" width="292"></div>',
            '<div style="clear:both;padding:0 5px;height:200px;overflow:auto;background-color:white;margin:5px 2px;border:1px solid black">',
            '<p style="padding-bottom:5px">',
            t1 + '</p><p>' + t2 + '</p><p>' + t3 + '</p><p>' + t4 + '</p><p>' + t5 + '</p><p>' + t6 + '</p>/div></div>'

            ].join('');  


        if (icontype < 1)
           {
       side_html += '<tr><td style="padding:5px 0 5px 10px" bgcolor="#83f859"><span>' + name + '</span></td></tr>';
    }
    else
    {
    side_html += '<tr><td ><img src=' + tinyicon[icontype] + '>&nbsp;&nbsp;<a href="javascript:myclick(' + i + ')">' + name + '</a></td></tr>';
    }

        createMarker(pt, html, name, icontype, bounds);


}
        console.log("finished with markers")

    side_html += '</tbody> \
                        </table>';
                document.getElementById("side_bar").innerHTML = side_html;
}


function createMarker(point,info,name,icontype,bounds) {
    console.log("function createMarker")
    var marker = new google.maps.Marker({
       position: point,
       map: map,
       title: name,
       icon: gicons[icontype]
    });
    //bounds.extend(point);


    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.close();
      infoWindow.setContent(info);
      infoWindow.open(map,marker); 
    });
  }

   function myclick(num) {
    console.log("function myclick")
    google.maps.event.trigger(markers[num], "click");
  }

Answer 1

您的代码存在命名错误。

第一

var bounds = new google.maps.LatLngBounds ();

后

bounds.extend(pt);
map.fitBounds(bounds);

然后

bounds.extend(point);

我会从GLOBAL中删除第一个构造函数，并在循环之前将其放在getData()中。bounds.extend(pt);在createMarker()之后没有bounds参数。最后在循环后map.fitBounds(bounds);。

var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < dt.getNumberOfRows(); i++) {
...
...
var pt = new google.maps.LatLng(lat, lng);
...
...
createMarker(pt, html, name, icontype);//no bounds
bounds.extend(pt);
...
...
 }
 map.fitBounds(bounds);

适用于Google地图中的fitBounds的错误

1 个答案: