jquery - 谷歌地图标记奇怪地拉伸问题

Question

我遇到了谷歌地图的奇怪行为（见附图）有人知道这是怎么回事吗？以前有人经历过吗？

下面的代码

<script>
<!--
    var map_geolocation;

    function savePosition_geolocation(point)
    {
        var input = document.getElementById("id_geolocation");
        input.value = point.lat().toFixed(6) + "," + point.lng().toFixed(6);
        map_geolocation.panTo(point);
    }

    function load_geolocation() {
        var point = new google.maps.LatLng(50.728632, 9.111587);

        var options = {
            zoom: 13,
            center: point,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            // mapTypeControl: true,
            // navigationControl: true
        };

        map_geolocation = new google.maps.Map(document.getElementById("map_geolocation"), options);

        var marker = new google.maps.Marker({
                map: map_geolocation,
                position: new google.maps.LatLng(50.728632, 9.111587),
                draggable: true

        });
        google.maps.event.addListener(marker, 'dragend', function(mouseEvent) {
            savePosition_geolocation(mouseEvent.latLng);
        });

        google.maps.event.addListener(map_geolocation, 'click', function(mouseEvent){
            marker.setPosition(mouseEvent.latLng);
            savePosition_geolocation(mouseEvent.latLng);
        });

    }

    $(function() {
        load_geolocation();
    });

//-->
</script>
        <input type="hidden" name="geolocation" value="50.728632,9.111587" id="id_geolocation" /><div id="map_geolocation" style="width: 400px; height: 300px"></div>

Answer 1

我见过各种形式的拉伸图块和扭曲的控件，但这是我第一次看到拉伸标记和阴影。如果我们幸运的话，将这些行添加到您的 CSS 或样式中将不会拉伸地图和标记。

 #map_geolocation label { width: auto; display:inline; }
 #map_geolocation img { max-height: none; max-width: none; }

我尝试了您附加的代码，它看起来不错。

Answer 2

你在使用推特引导程序吗？如果是这样，请尝试添加以下样式表。

div#map_geolocation img {
  max-width:none;
}

Answer 3

对于那些在Google Maps JavaScript API的较新版本 (v3.33+) 2018-2019 上遇到此问题的人。我建议也查看这篇文章： https ://stackoverflow.com/a/54140395/8658147 。