Question

我在div中创建了一个地图，大小为1024px * 1024px 我使用fitbounds来设置纬度和经度并调整地图的大小。

但世界上仍有2个地方

<!DOCTYPE html>
 <html>
  <head>
    <title>Repoint Map</title>
     <style>
      html, body, #map-canvas {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;

        min-width: 1024px;
        min-height: 1024px;

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }

      #map_canvas_container {position: relative;}

        div#content {
        width: 100%; height: 100%;
        }

   #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }

      /*
       Provide the following styles for both ID and class,
       where ID represents an actual existing "panel" with
       JS bound to its name, and the class is just non-map
       content that may already have a different ID with
       JS bound to its name.
      */

      #panel, .panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #panel select, #panel input, .panel select, .panel input {
       font-size: 15px;
      }

       #panel select, .panel select {
        width: 100%;
       }

      #panel i, .panel i {
        font-size: 12px;
       }

    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
       <script>
         // In the following example, markers appear when the user clicks on the map.
        // The markers are stored in an array.
        // The user can then click an option to hide, show or delete the markers.

            var geocoder = new google.maps.Geocoder();
            var map;
            var markers = [];





        function initialize() {
           // var Extrico = new google.maps.LatLng(56.1341602, 8.99381440000002);
            var punkt1 = new google.maps.LatLng(58.0002316, 10.000000000012);
             var punkt2 = new google.maps.LatLng(56.0, 8.0)

            var southWest = new google.maps.LatLng(85, -180);
            var northEast = new google.maps.LatLng(-85, 180);
            var bounds = new google.maps.LatLngBounds(southWest, northEast);

            var mapOptions = {              
                zoom: 1,
                center: new google.maps.LatLng(0, 0),
                mapTypeId: google.maps.MapTypeId.ROADMAP               
            };

                map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);

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

                map.fitBounds(bounds);
                map.setZoom(map.getZoom() + 1);


                codeLatLng();

           // reverse geolocation 

               var geoMarker = [];

                function codeLatLng() {

                  var input = '51, 9';
                  var latlngStr = input.split(',', 2);
                  var latlng = new google.maps.LatLng(latlngStr[0], latlngStr[1]);
                   geocoder.geocode({'location': latlng }, function    (results, status) {
                      console.log(results, status);
                       if (status == google.maps.GeocoderStatus.OK) {
                            if (results[1]) {
                               geoMarker = new google.maps.Marker({
                                   position: latlng,
                                   map: map
                                });
                            } else {
                               window.alert('no location ' + status);
                           }

                       }
                    });

              }
                addMarker(geoMarker);




            // This event listener will call addMarker() when the map is clicked.
       //     google.maps.event.addListener(map, 'click', function (event) {
         //       addMarker(event.latLng);
          //  });

            // Adds a marker at the center of the map.
          //  addMarker(Extrico);
           // addMarker(punkt1);
           // addMarker(punkt2);                
      }

        // Add a marker to the map and push to the array.
            function addMarker(location) {
               var marker = new google.maps.Marker({
                  position: location,
                  map: map
               });
               markers.push(marker);
             }

        // Sets the map on all markers in the array.
             function setAllMap(map) {
                for (var i = 0; i < markers.length; i++) {
                   markers[i].setMap(map);
              }
          }

        // Removes the markers from the map, but keeps them in the array.
            function clearMarkers() {
                setAllMap(null);
            }

        // Shows any markers currently in the array.
            function showMarkers() {
                setAllMap(map);
            }

        // Deletes all markers in the array by removing references to them.
            function deleteMarkers() {
               clearMarkers();
                markers = [];
            }

            google.maps.event.addDomListener(window, 'load', initialize);
            google.maps.event.addDomListener(window, 'resize', initialize);
    </script>
    </head>
   <body>
     <div id="panel">
      <input onclick="clearMarkers();" type=button value="Hide Markers">
      <input onclick="showMarkers();" type=button value="Show All Markers">
      <input onclick="deleteMarkers();" type=button value="Delete Markers">
    </div>
   <div id="map-canvas"></div>    
 </body>
 </html>

Answer 1

如果您只想在1024px到1024px的div上迭代一次地图，则需要将最小缩放设置为2（2 ^ 2 = 4 * 256 = 1024）。

var mapOptions = {
    zoom: 2,
    minZoom: 2,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

google maps api v3固定大小的地图javascript

1 个答案: