JavaScript 的全新功能,使用 Google Maps API v3 w/ custom fitbounds (

Completely new to javascript and using Google Maps API v3 w/ custom fitbounds (myFitBounds)

本文关键字:v3 custom fitbounds API Maps 新功能 Google 使用 JavaScript      更新时间:2023-09-26

我一直在通过在线示例和反复试验自学Javascript一段时间了,但我遇到了一个我不太理解的问题,它让我非常疯狂。请原谅任何和所有语言/术语的混乱和缺乏基本的编码知识。

我有一个对谷歌地图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>

如果这对你们所有人来说都是废话,我真的很抱歉,但我非常感谢在我了解更多有关此方面的帮助和时间。

难以

置信。我所要做的就是一些简单的改变,当然是改变:

map.myFitBounds(map, bounds);

myFitBounds(map, bounds);

对于一个愚蠢的第一个SO问题来说,这是怎么

回事!