Question

我遇到了默认标记的问题，它在缩小时似乎是偏移的。我在这里看了很多，但只能找到自定义标记图像的答案并在图像上设置锚点。我使用谷歌的默认标记图片。

这是有问题的网站，您会注意到，一旦缩小，图书中的地图就会不准确，例如白马岛的客户最终将会出现在德国！

但是，在此页面上，地图是准确的。

http://www.thecompleteanimaldirectory.com/search.php?category=dog&area=

geocoder = new google.maps.Geocoder();
                                var mapOptions = {
                                    center: { lat: 32.00, lng: 15.00},
                                    zoom: 8
                                };


                                function initialize() {
                                    var map20 = new google.maps.Map(document.getElementById("map_canvas_barrie"), mapOptions);

                                    function codeAddress20() {
                                        var address20 = "11 Ashey Park, Ashey Road Ryde, I.O.W, PO33 4AL";


                                        geocoder.geocode( { "address": address20}, function(results, status) {
                                            if (status == google.maps.GeocoderStatus.OK) {
                                                map20.setCenter(results[0].geometry.location);
                                                var marker20 = new google.maps.Marker({
                                                    map: map20, 
                                                    position: results[0].geometry.location,
                                                });
                                            } else {
                                                map20.setZoom(0);
                                            }
                                        });
                                    }
                                    codeAddress20();

两个页面的代码都相同，我已经尽可能地在两个页面上对地图进行样式设置，但没有运气。任何帮助表示赞赏！

Answer 1

这是一个CSS问题。

问题的根源是main.css中的这个规则，它也适用于地图中的图像：

        .booklet .b-wrap-right img,
        #book-right-side img {
            position: absolute;
            bottom: 10px;
            right: 15px;
            height: 30px;
        }

添加此规则以覆盖它：

  .right-book .gm-style img{
            bottom: 0;
            right: 0;
            position:relative;
            height:auto;
  }

Google Maps API - 缩小时默认标记不准确

1 个答案: