0

我需要显示带有许多标记的地图，并且我想相应地自动调整地图的大小。

因为我已经在这个站点中找到了解决方案，所以我添加了这些行

bounds.extend(myLatlng); map.fitBounds(边界);

这里是完整的代码

<script type="text/javascript">

    var map;
    var coords = new Object();
    var markersArray = [];
    coords.lat = -15.788;
    coords.lng = -47.900;
    var bounds = new google.maps.LatLngBounds();


    function plotPoint(srcLat,srcLon,color,num,idCat,cep,message)
    {
        var pinColor = color;
        var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));
        var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
            new google.maps.Size(40, 37),
            new google.maps.Point(0, 0),
            new google.maps.Point(12, 35));

            var myLatlng = new google.maps.LatLng(srcLat, srcLon);            
            var marker = new google.maps.Marker({
                  position: myLatlng, 
                  map: map, 
                  icon: pinImage,
                  shadow: pinShadow
              });
            boxText = document.createElement("div");
            var myOptions = {               
                content: boxText,
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-70, -7),
                zIndex: null,
                boxStyle: {
                    opacity: 0.85,
                    width: "140px"
                },

                closeBoxURL: "",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false
            };
            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;text-align: center;";
            boxText.innerHTML = message;

            var ib = new InfoBox(myOptions);
              google.maps.event.addListener(marker, 'mouseover', function() {
                ib.open(map,marker);
                ib.show();
              });
              google.maps.event.addListener(marker, 'mouseout', function() {
                ib.hide();
              });

             google.maps.event.addListener(marker, 'click', function() {
                window.location = "browse.php?id="+idCat+"&cep="+cep;});

            bounds.extend(myLatlng);
            map.fitBounds(bounds);
                    map.setZoom(12);

    }
    function initialize() 
    {      

        var latlng = new google.maps.LatLng(coords.lat, coords.lng);
        var myOptions = {
          zoom: 12,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_div"),  myOptions);     

    }   

</script>

当有多个标记时，此代码可以完美运行，但是当只有一个时，放大设置为最大值。我尝试使用setzoom方法，但它似乎没有做任何事情。

有人可以告诉我我做错了什么吗？

提前非常感谢。何塞

更新：在使用 fitBounds() 和 Google Maps API V3 后按照此处的说明解决 使用 setZoom()

我添加的代码

zoomChangeBoundsListener = 
            google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
                if (num_markers = 1){
                    this.setZoom(12);
                }
            });
        setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);
4

1 回答 1

0

执行 fitbounds 函数后尝试缩小：

bounds.extend(myLatlng); 
map.fitBounds(bounds);
map.setZoom(map.getZoom() - 2) //or - 1, or a fixed number, depending on how close or far out you want it zoomed in
于 2013-07-23T13:13:46.353 回答