-1

一段时间以来,我一直在通过在线示例和反复试验自学 Javascript,但我遇到了一个我完全不理解的问题,这让我非常抓狂。请原谅语言/术语方面的任何和所有错误以及缺乏基本的编码知识。

我对在我的个人网站上运行的 Google Maps API 进行了有效调用,但我讨厌fitBounds() 将45px 的填充添加到地图框的边界的方式。我在同一个线程上阅读了一个潜在的解决方案,该解决方案使用自定义的东西重新计算 fitBounds(),称为 myFitBounds,这也详细说明了我认为是用户的站点。

所以我试图将他的代码插入到我的javascript调用中,但我完全没有用它。当我在调试器中运行脚本时,出现错误:

undefined is not a function (evaluating 'map.myFitBounds(map, bounds)')

现在,我完全确定我没有正确调用它,不知何故。但是由于我没有接受过任何关于 javascript 的培训,而且我找不到一个如何在 GMaps API 环境中调用这个特定自定义函数的示例,所以我对我需要做什么感到非常困惑。

这是我的脚本标签之间的代码。myFitBounds() 调用位于代码中与运行示例中的 fitBounds() 调用相同的位置。

    <script>

        function map_initialize() {
            var places = [


            {
            name: 'Boston',
            display:    '<div id="infowindowcontent">'+
                        '<div class="iwtitle">BOS</div><div class="iwcity"><a href="airportinfo.cfm?airport=BOS">Boston</a></div>'+
                        '</div>',   


            latlng: new google.maps.LatLng(42.36566960626233, -71.00959794628909)
            }, 
            {
            name: 'New York City',
            display:    '<div id="infowindowcontent">'+
                        '<div class="iwtitle">LGA</div><div class="iwcity"><a href="airportinfo.cfm?airport=LGA">New York City</a></div>'+
                        '</div>',   


            latlng: new google.maps.LatLng(40.776941170264045, -73.87393968212893)
            }, 
            {
            name: 'Orlando',
            display:    '<div id="infowindowcontent">'+
                        '<div class="iwtitle">MCO</div><div class="iwcity"><a href="airportinfo.cfm?airport=MCO">Orlando</a></div>'+
                        '</div>',   


            latlng: new google.maps.LatLng(28.43121198017089, -81.30807893383792)
            } 
            ];

            var mapoptions = {
            center: new google.maps.LatLng(0, 0),
            zoom: 0,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            disableDefaultUI: true,
            zoomControl: true,
            scrollwheel: false

            }

            var map = new google.maps.Map(document.getElementById("mapdiv"), 
                mapoptions);

            var infowindow = new google.maps.InfoWindow({
                  maxWidth: 160
                });
               var markers = new Array();
            /*
            Markers
            */


            for (var i = 0; i < places.length; i++) {
                var marker = new google.maps.Marker({
                    position: places[i].latlng,
                    icon: {
                      path: google.maps.SymbolPath.CIRCLE,
                      scale: 3,
                      strokeColor: 'black'
                    },
                    map: map,
                    title: places[i].name,
                    content: places[i].name             
                });



              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                  infowindow.setContent(places[i].display);
                  infowindow.open(map, marker);
                }
              })(marker, i));


            }



            /*
            Fit to Bounds
            */

            var bounds = new google.maps.LatLngBounds();
            for (var i = 0; i < places.length; i++) {
                bounds.extend(places[i].latlng);
            }

            /* 
            Custom Fit to Bounds
            */



            function myFitBounds(map, bounds) {
                map.fitBounds(bounds); // calling fitBounds() here to center the map for the bounds

                var overlayHelper = new google.maps.OverlayView();
                overlayHelper.draw = function () {
                    if (!this.ready) {
                        var extraZoom = getExtraZoom(this.getProjection(), bounds, map.getBounds());
                        if (extraZoom > 0) {
                            map.setZoom(map.getZoom() + extraZoom);
                        }
                        this.ready = true;
                        google.maps.event.trigger(this, 'ready');
                    }
                };
                overlayHelper.setMap(map);
            }

            function getExtraZoom(projection, expectedBounds, actualBounds) {

                // in: LatLngBounds bounds -> out: height and width as a Point
                function getSizeInPixels(bounds) {
                    var sw = projection.fromLatLngToContainerPixel(bounds.getSouthWest());
                    var ne = projection.fromLatLngToContainerPixel(bounds.getNorthEast());
                    return new google.maps.Point(Math.abs(sw.y - ne.y), Math.abs(sw.x - ne.x));
                }

                var expectedSize = getSizeInPixels(expectedBounds),
                    actualSize = getSizeInPixels(actualBounds);

                if (Math.floor(expectedSize.x) == 0 || Math.floor(expectedSize.y) == 0) {
                    return 0;
                }

                var qx = actualSize.x / expectedSize.x;
                var qy = actualSize.y / expectedSize.y;
                var min = Math.min(qx, qy);

                if (min < 1) {
                    return 0;
                }

                return Math.floor(Math.log(min) / Math.LN2 /* = log2(min) */);
            }




/*
 * Starter Marker in Gold
 *
 */
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(40.776941170264045, -73.87393968212893),
                icon: {
                  path: google.maps.SymbolPath.CIRCLE,
                  scale: 3.5,
                  strokeColor: 'gold'
                },
                draggable: false,
                map: map
              });



/*
 * Adds the Flight Paths in great circles
 *
 */



              var flightPath = new google.maps.Polyline({path: [new google.maps.LatLng(40.776941170264045, -73.87393968212893),new google.maps.LatLng(42.36566960626233, -71.00959794628909)], strokeColor: "#000000", strokeOpacity: 1, strokeWeight: 2, geodesic: true });
                  flightPath.setMap(map);



              var flightPath = new google.maps.Polyline({path: [new google.maps.LatLng(28.43121198017089, -81.30807893383792),new google.maps.LatLng(40.776941170264045, -73.87393968212893)], strokeColor: "#000000", strokeOpacity: 1, strokeWeight: 2, geodesic: true });
                  flightPath.setMap(map);





                        map.myFitBounds(map, bounds);

        }
        google.maps.event.addDomListener(window, 'load', map_initialize);


    </script>

如果这对你们所有人来说都是一团糟,我真的很抱歉,但我非常感谢在我了解更多相关信息时提供的帮助和时间。

4

1 回答 1

0

难以置信的。我所要做的只是一些简单的事情,当然,改变:

map.myFitBounds(map, bounds);

myFitBounds(map, bounds);

愚蠢的第一个 SO 问题怎么样!

于 2015-03-13T02:11:13.740 回答