如何在 Google 地图的可见区域显示半径或圆

Question

我正在使用 Google 地图，我正在显示显示用户区域的半径或圆。

现在的问题是半径超出了 Google 地图的可见区域，所以我想缩小一点，以便我可以在 Google 的可见区域中适应半径或圆地图.

可能是因为 map.fitBounds(markerBounds);它没有缩小。

main:在这种情况下如何缩小日历。

我正在使用以下代码

<script type="text/javascript">
    jQuery(function() {

                    // map options
                    var options = {
                        zoom: 4,
                        center: new google.maps.LatLng(<?php echo $fetch_byproposal['latitude']; ?>,<?php echo $fetch_byproposal['longitude']; ?>), // centered US
                        mapTypeId: google.maps.MapTypeId.TERRAIN,
                        mapTypeControl: false,
                    };

                    // init map
                    var map = new google.maps.Map(document.getElementById('map_canvas'), options);
                    var markerBounds = new google.maps.LatLngBounds();
          //     console.log(loc);           
                //   for (var key in loc){
                    //  alert(loc[key][0], loc[key][1]);
                //       if (loc.hasOwnProperty(key)) {
                    randomPoint         =   new google.maps.LatLng(<?php echo $fetch_byproposal['latitude']; ?>,<?php echo $fetch_byproposal['longitude']; ?>)
                        var marker      =   new google.maps.Marker({
                            position    :   randomPoint,
                            map         :   map,
                            icon        :   '<?php echo frontpath(IMAGES_DIRECTORY.'gmap.png');?>',
                            title       :   '<?php echo $fetch_byproposal['location']; ?>'


                        });

                            var populationOptions = {
                              strokeColor       : '#FF0000',
                              strokeOpacity     : 0.8,
                              strokeWeight      : 2,
                              fillColor         : '#FF0000',
                              fillOpacity       : 0.35,
                              map               : map,
                              center            : options.center,
                              radius            : <?php echo $fetch_byproposal['distanceKm']; ?>
                            };
                            // Add the circle for this city to the map.
                            options = new google.maps.Circle(populationOptions);


                        markerBounds.extend(randomPoint);
                        map.fitBounds(markerBounds);

                            (function(marker) {

                                var locKeyName  =   '';
                                var locKeyLink  =   '';
                                var compName    =   '';
                                var userImg     =   '';
                                var userLoc     =   '';
                                google.maps.event.addListener(marker, 'click', function() {                                     
                                    infowindow = new google.maps.InfoWindow({
                                    content: '<b><?php echo $fetch_byproposal['location'];?></b>'

                                    });
                                    infowindow.open(map, marker);
                                });
                            })

                        (marker);
                //      }
                //  }

                });
 </script>

Answer 1

尝试在适合范围之前触发调整大小：

 google.maps.event.trigger(map, 'resize');

如果这不起作用，如果您 post 生成的 HTML 代码不包含 PHP 可能会有用 - 这样我们就可以重现该问题。

Answer 2

如果你想让你的边界包括圆圈，你需要给它添加圆圈（使用google.maps.LatLngBounds.union方法）：

  // circle object is called "options")
  markerBounds.union(options.getBounds());
  markerBounds.extend(randomPoint);
  map.fitBounds(markerBounds);

working fiddle

如何在 Google 地图的可见区域显示半径或圆

How to show radius or circle with in visible area of Google map

javascript

php

google-maps

google-maps-api-3