代码之家  ›  专栏  ›  技术社区  ›  Jumpy

谷歌地图fitBounds是否在标记标签上抛出了一个bug?

  •  0
  • Jumpy  · 技术社区  · 6 年前

    如果我在Google Maps地图上添加一个带有标签的标记,然后调用fitBounds到另一个区域,除非缩小,否则我仍然会看到没有标记的标签。 是虫子吗?

    这是一把小提琴,试着点击米兰按钮: JSFiddle

    Html:

    <div id="map-canvas"></div>
    

    CSS:

    #map-canvas {
        width:100%;
        height:500px;
        position:"absolute";
        top: 0px;
        left: 0px;
        overflow:"hidden";
        background-color:#000;
    }
    
    .map-button{    
        margin-top: 10px;
        height: 30px;
        cursor: pointer;
        color: #565656;
        border:0px;
        border-radius: 3px;
        background-color:#fff;
        box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 4px -1px;    
    }
    
    .map-button:hover {
        background-color: #ebebeb;
        color: #000;
    }
    

    Javascript:

    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(41.29085, 12.71216),
            zoom: 6,
            gestureHandling: 'greedy'               
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
        var marker = new google.maps.Marker({
                                        position: map.getCenter(), 
                                        map: map, 
                                        label: {
                                            text:'Roma',
                                            fontSize: '28px'
                                        }
                                    });
    
        var control = document.createElement('button');
        control.innerHTML = 'Milano';
        control.className = 'map-button';
    
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(control);
    
        google.maps.event.addDomListener(control, 'click', function (event) {
            var milanBounds = new google.maps.LatLngBounds(
                                                    {lat: 45.462818, lng: 9.184145},
                                                    {lat: 45.466806, lng: 9.190239});
    
            map.fitBounds(milanBounds);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    
    2 回复  |  直到 6 年前
        1
  •  1
  •   Alex    6 年前

    更改API版本帮助我解决了相同的错误(标签移动时没有标记)。当我尝试将贴图平移到特定标记位置,然后放大时,就会发生这种情况。 在我的例子中,google maps API的3.31版成功了。

        2
  •  0
  •   MrUpsidown    6 年前

    看起来您描述的问题只发生在API的实验版本中。

    通过在API调用中不指定版本号,您将获得实验版本,这可能不是最好的主意,尤其是对于生产中的应用程序。

    尝试在API调用中指定版本以获取发布版本,例如:

    //maps.googleapis.com/maps/api/js?v=3&key=YOUR_API_KEY
    

    请参阅 this link 了解更多关于版本控制和谷歌鼓励的最佳实践的信息。