Question

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

现在的问题是半径超出谷歌地图的可见区域，所以我想缩小一点，以便我可以在谷歌地图的可见区域内拟合半径或圆圈。

可能是因为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.LatLngBounds.union方法）：

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

working fiddle

Answer 2

尝试在适合边界之前触发调整大小：

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

如果这不起作用，如果您发布没有PHP包含的生成的HTML代码可能会有用 - 所以我们可以复制问题。

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

2 个答案: