缩放选项不适用于 google 地图

Question

我正在使用 google 地图 api 在地图选项中进行开发我正在设置地图的缩放级别，但视图没有变化

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        var markers = [{
            "title": 'point4',
            "lat": '1.355333',
            "lng": '103.987305',
            "description": 'uuu'
        }, {
            "title": 'point3',
            "lat": '1.354432',
            "lng": '103.987262',
            "description": 'zzz'
        },  {
            "title": 'point3',
            "lat": '1.354432',
            "lng": '103.987262',
            "description": 'zzz'
        },{
            "title": 'point3',
            "lat": '1.353199',
            "lng": '103.986908',
            "description": 'zzz'
        },{
            "title": 'point3',
            "lat": '1.353199',
            "lng": '103.986908',
            "description": 'zzz'
        }, {
            "title": 'point4',
            "lat": '1.352389',
            "lng": '103.986538',
            "description": 'zzz'
        },{
            "title": 'point1',
            "lat": '1.353751',
            "lng": '103.986688',
            "description": 'xxxx'
        }, {
            "title": 'point2',
            "lat": '1.352657',
            "lng": '103.986184',
            "description": 'yyyy'
        }, {
            "title": 'point3',
            "lat": '1.352657',
            "lng": '103.986184',
            "description": 'zzz'
        }, {
            "title": 'point4',
            "lat": '1.351477',
            "lng": '103.985701',
            "description": 'uuu'
        }, {
            "title": 'point4',
            "lat": '1.351477',
            "lng": '103.985701',
            "description": 'uuu'
        }, {
            "title": 'point4',
            "lat": '1.350265',
            "lng": '103.985165',
            "description": 'uuu'
        }];
        var gmarkers = [];
        var colorVariable = ["yellow", "green", "red", "saffron","yellow", "green", "red","yellow", "green", "red"];
        var map;
        var degree = 0;
        function autoRotate() {
            var $elie = $("#dvMap");
            degree = degree + 65;
            rotate(degree);
            function rotate(degree) {
                // For webkit browsers: e.g. Chrome
                $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
                $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
                $elie.css({ '-ms-transform': 'rotate(' + degree + 'deg)'});
                $elie.css({ '-o-transform': 'rotate(' + degree + 'deg)'});

                for (var i= 0; i < gmarkers.length; i++) {
                    gmarkers[i].setIcon(icon48.png("red", -degree));
                }
            }
        }
        window.onload = function() {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                heading: 90,
                tilt: 45,
                styles: [
                    {
                        "featureType": "poi",
                        "stylers": [
                            { "visibility": "off" }
                        ]
                    }
                ]
            };

            map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var infoWindow = new google.maps.InfoWindow();
            var lat_lng = new Array();
            var latlngbounds = new google.maps.LatLngBounds();
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    icon:'icon48.png',
                    title: data.title
                });
                latlngbounds.extend(marker.position);
                (function(marker, data) {
                    google.maps.event.addListener(marker, "click", function(e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
                gmarkers.push(marker);
            }
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);


            //Loop and Draw Path Route between the Points on MAP
            for (var i = 0; i < lat_lng.length; i++) {
                var src = lat_lng[i];
                var des = lat_lng[i + 1];
                var k=i;
                i=i+1;
                getDirections(src, des, colorVariable[k], map);

            }
            /*autoRotate();*/
        }

        function getDirections(src, des, color, map) {
            //Intialize the Direction Service
            var service = new google.maps.DirectionsService();
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function(result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    //Intialize the Path Array
                    var path = [];
                    for (var i = 0; i < result.routes[0].overview_path.length; i++) {
                        path.push(result.routes[0].overview_path[i]);
                    }
                    //Set the Path Stroke Color
                    var polyOptions = {
                        strokeColor: color,
                        strokeOpacity: 1.0,
                        strokeWeight: 8,
                        path: path,
                        map: map
                    }
                    poly = new google.maps.Polyline(polyOptions);
                    poly.setMap(map);

                }
            });
        }

        function pinSymbol(color, rotation) {
            return {
                path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
                fillColor: color,
                fillOpacity: 1,
                strokeColor: '#000',
                strokeWeight: 1,
                rotation: rotation,
                scale: 1
            };
        }
    </script>
</head>
<body>
<div id="dvMap" style="width:1000px;height:1000px"></div>
</body>
</html>

我试图显式设置选项 has map.setZoom(15)；我厌倦了将地图的保留视口选项设置为真，运气不好请帮忙

Answer 1

我已经尝试过这样的检查一旦它通过 setZoom() 工作为什么你没有得到因为你的设置边界所以在边界设置缩放更改与边界相关之后，如果你想要缩放级别 15 的所有标记那么不要设置边界，如果没有，你能告诉我你想在哪里设置缩放吗...

<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var markers = [{
        "title": 'point4',
        "lat": '1.355333',
        "lng": '103.987305',
        "description": 'uuu'
    }, {
        "title": 'point3',
        "lat": '1.354432',
        "lng": '103.987262',
        "description": 'zzz'
    },  {
        "title": 'point3',
        "lat": '1.354432',
        "lng": '103.987262',
        "description": 'zzz'
    },{
        "title": 'point3',
        "lat": '1.353199',
        "lng": '103.986908',
        "description": 'zzz'
    },{
        "title": 'point3',
        "lat": '1.353199',
        "lng": '103.986908',
        "description": 'zzz'
    }, {
        "title": 'point4',
        "lat": '1.352389',
        "lng": '103.986538',
        "description": 'zzz'
    },{
        "title": 'point1',
        "lat": '1.353751',
        "lng": '103.986688',
        "description": 'xxxx'
    }, {
        "title": 'point2',
        "lat": '1.352657',
        "lng": '103.986184',
        "description": 'yyyy'
    }, {
        "title": 'point3',
        "lat": '1.352657',
        "lng": '103.986184',
        "description": 'zzz'
    }, {
        "title": 'point4',
        "lat": '1.351477',
        "lng": '103.985701',
        "description": 'uuu'
    }, {
        "title": 'point4',
        "lat": '1.351477',
        "lng": '103.985701',
        "description": 'uuu'
    }, {
        "title": 'point4',
        "lat": '1.350265',
        "lng": '103.985165',
        "description": 'uuu'
    }];
    var gmarkers = [];
    var colorVariable = ["yellow", "green", "red", "saffron","yellow",    "green", "red","yellow", "green", "red"];
    var map;
    var degree = 0;
    function autoRotate() {
        var $elie = $("#dvMap");
        degree = degree + 65;
        rotate(degree);
        function rotate(degree) {
            // For webkit browsers: e.g. Chrome
            $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
            $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
            $elie.css({ '-ms-transform': 'rotate(' + degree + 'deg)'});
            $elie.css({ '-o-transform': 'rotate(' + degree + 'deg)'});

            for (var i= 0; i < gmarkers.length; i++) {
                gmarkers[i].setIcon(icon48.png("red", -degree));
            }
        }
    }

    window.onload = function() {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            heading: 90,
            tilt: 45,
            styles: [
                {
                    "featureType": "poi",
                    "stylers": [
                        { "visibility": "off" }
                    ]
                }
            ]
        };

        map = new google.maps.Map(document.getElementById("dvMap"),     mapOptions);
        var infoWindow = new google.maps.InfoWindow();
        var lat_lng = new Array();
        console.log(map.getZoom());
        var latlngbounds = new google.maps.LatLngBounds();
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon:'icon48.png',
                title: data.title
            });
            latlngbounds.extend(marker.position);
            (function(marker, data) {
                google.maps.event.addListener(marker, "click", function(e) {
                    infoWindow.setContent(data.description);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            gmarkers.push(marker);
        }
        map.setZoom(15);
        console.log(map.getZoom());
        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);
        map.addListener('zoom_changed', function() {
            console.log(map.getZoom());
        });


        //Loop and Draw Path Route between the Points on MAP
        for (var i = 0; i < lat_lng.length; i++) {
            var src = lat_lng[i];
            var des = lat_lng[i + 1];
            var k=i;
            i=i+1;
            getDirections(src, des, colorVariable[k], map);

        }
        /*autoRotate();*/
    }

    function getDirections(src, des, color, map) {
        //Intialize the Direction Service
        var service = new google.maps.DirectionsService();
        service.route({
            origin: src,
            destination: des,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                //Intialize the Path Array
                var path = [];
                for (var i = 0; i < result.routes[0].overview_path.length;    i++) {
                    path.push(result.routes[0].overview_path[i]);
                }
                //Set the Path Stroke Color
                var polyOptions = {
                    strokeColor: color,
                    strokeOpacity: 1.0,
                    strokeWeight: 8,
                    path: path,
                    map: map
                }
                poly = new google.maps.Polyline(polyOptions);
                poly.setMap(map);

            }
        });
    }

    function pinSymbol(color, rotation) {
        return {
            path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
            fillColor: color,
            fillOpacity: 1,
            strokeColor: '#000',
            strokeWeight: 1,
            rotation: rotation,
            scale: 1
        };
    }
</script>
</head>
<body>
<div id="dvMap" style="width:1000px;height:1000px"></div>
</body>
</html>

Answer 2

如果您想控制地图的缩放级别，请移除对 map.fitBounds 的调用。 google.maps.Map.fitBounds method 缩放地图并将其居中于其参数（一个 google.maps.LatLngBounds 对象）。

fitBounds(bounds:LatLngBounds|LatLngBoundsLiteral)

Return Value: None

Sets the viewport to contain the given bounds.

然后根据需要设置地图的中心和缩放级别。

代码片段：

var gmarkers = [];
var colorVariable = ["yellow", "green", "red", "saffron", "yellow", "green", "red", "yellow", "green", "red"];
var map;
var degree = 0;

function autoRotate() {
  var $elie = $("#dvMap");
  degree = degree + 65;
  rotate(degree);

  function rotate(degree) {
    // For webkit browsers: e.g. Chrome
    $elie.css({
      WebkitTransform: 'rotate(' + degree + 'deg)'
    });
    $elie.css({
      '-moz-transform': 'rotate(' + degree + 'deg)'
    });
    $elie.css({
      '-ms-transform': 'rotate(' + degree + 'deg)'
    });
    $elie.css({
      '-o-transform': 'rotate(' + degree + 'deg)'
    });

    for (var i = 0; i < gmarkers.length; i++) {
      gmarkers[i].setIcon(icon48.png("red", -degree));
    }
  }
}
window.onload = function() {
  var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    heading: 90,
    tilt: 45,
    styles: [{
      "featureType": "poi",
      "stylers": [{
        "visibility": "off"
      }]
    }]
  };

  map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
  var infoWindow = new google.maps.InfoWindow();
  var lat_lng = new Array();
  var latlngbounds = new google.maps.LatLngBounds();
  for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: 'icon48.png',
      title: data.title
    });
    latlngbounds.extend(marker.position);
    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        infoWindow.setContent(data.description);
        infoWindow.open(map, marker);
      });
    })(marker, data);
    gmarkers.push(marker);
  }
  map.setCenter(latlngbounds.getCenter());

  //Loop and Draw Path Route between the Points on MAP
  for (var i = 0; i < lat_lng.length; i++) {
    var src = lat_lng[i];
    var des = lat_lng[i + 1];
    var k = i;
    i = i + 1;
    getDirections(src, des, colorVariable[k], map);

  }
  /*autoRotate();*/
}

function getDirections(src, des, color, map) {
  //Intialize the Direction Service
  var service = new google.maps.DirectionsService();
  service.route({
    origin: src,
    destination: des,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      //Intialize the Path Array
      var path = [];
      for (var i = 0; i < result.routes[0].overview_path.length; i++) {
        path.push(result.routes[0].overview_path[i]);
      }
      //Set the Path Stroke Color
      var polyOptions = {
        strokeColor: color,
        strokeOpacity: 1.0,
        strokeWeight: 8,
        path: path,
        map: map
      }
      poly = new google.maps.Polyline(polyOptions);
      poly.setMap(map);

    }
  });
}

function pinSymbol(color, rotation) {
  return {
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 1,
    rotation: rotation,
    scale: 1
  };
}
var markers = [{
  "title": 'point4',
  "lat": '1.355333',
  "lng": '103.987305',
  "description": 'uuu'
}, {
  "title": 'point3',
  "lat": '1.354432',
  "lng": '103.987262',
  "description": 'zzz'
}, {
  "title": 'point3',
  "lat": '1.354432',
  "lng": '103.987262',
  "description": 'zzz'
}, {
  "title": 'point3',
  "lat": '1.353199',
  "lng": '103.986908',
  "description": 'zzz'
}, {
  "title": 'point3',
  "lat": '1.353199',
  "lng": '103.986908',
  "description": 'zzz'
}, {
  "title": 'point4',
  "lat": '1.352389',
  "lng": '103.986538',
  "description": 'zzz'
}, {
  "title": 'point1',
  "lat": '1.353751',
  "lng": '103.986688',
  "description": 'xxxx'
}, {
  "title": 'point2',
  "lat": '1.352657',
  "lng": '103.986184',
  "description": 'yyyy'
}, {
  "title": 'point3',
  "lat": '1.352657',
  "lng": '103.986184',
  "description": 'zzz'
}, {
  "title": 'point4',
  "lat": '1.351477',
  "lng": '103.985701',
  "description": 'uuu'
}, {
  "title": 'point4',
  "lat": '1.351477',
  "lng": '103.985701',
  "description": 'uuu'
}, {
  "title": 'point4',
  "lat": '1.350265',
  "lng": '103.985165',
  "description": 'uuu'
}];

html,
body,
#dvMap {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="dvMap"></div>

缩放选项不适用于 google 地图

Zoom option is not working for google map

google-maps

options

zooming

google-maps-api-3