缩放选项不适用于谷歌地图

时间：2015-11-21 04:26:07

标签： google-maps google-maps-api-3 zoom options

我正在使用谷歌地图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>

我试图明确设置选项有map.setZoom（15）; 而且我厌倦了将地图的保留视口选项设置为真，没有运气请帮助

2 个答案:

答案 0 :(得分：2)

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

  

fitBounds （界限：LatLngBounds | LatLngBoundsLiteral）

     

返回值：无

     

将视口设置为包含给定的边界。

然后将地图的中心和缩放级别设置为您想要的任何内容。

代码段 

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>

答案 1 :(得分：0)

我尝试过这样的检查一旦它通过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>
相关问题
最新问题