Question

根据标记缩放并居中地图。

我如何根据其标记缩放和居中地图。例如，显示的所有标记都是迪拜，所以我想将地图居中到迪拜，如果所有标记都是美国我想要缩放并居中它到美国。这是我的代码，任何人都可以帮助我。

test.php的

   <?php


    $sql=<<<EOF
     SELECT * from markers;
    EOF;
     $result = $db->query($sql);
     $yourArray = array();
     $index = 0;

      while($row = $result->fetchArray(SQLITE3_ASSOC) ){

      $json[] = array(
  'lat' => $row['latitude'],
  'lon' => $row['longitude'],
  'name' => $row['name'],
  'city_id'=>$row['city_id']


      );

     }

$db->close();


   ?>

  <!DOCTYPE html>
  <html>
    <head>
      <style>
       #map {
        height: 400px;
        width: 100%;
          }
    </style>
  </head>
  <body>
   <h3></h3>
 <div id="map" align="left"></div>
 <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDj38Snh4MEIsomOlTZfARryo7V8A_qk9o&libraries=places&callback=initMap">
  </script>
  <?php json_encode($json, JSON_PRETTY_PRINT) ?>
   <script type="text/javascript"> 
    function initMap() {
    debugger;

var locationsJSON = <?php echo json_encode($json, JSON_PRETTY_PRINT) ?>;

var locations = locationsJSON;
 for (i = 0; i < locations.length; i++) {

   if(location[i].city_id==1)
     {
     var map = new google.maps.Map(document.getElementById('map'), {
     zoom: 4,
     center: new google.maps.LatLng(31.5546, 74.3572),
     mapTypeId: google.maps.MapTypeId.ROADMAP
     });
    }
  else if(location[i].city_id==2)
   {

    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: new google.maps.LatLng(25.2048,55.2708),
    mapTypeId: google.maps.MapTypeId.ROADMAP
   }); 

   }
   }
  var geocoder = new google.maps.Geocoder();
 var infowindow = new google.maps.InfoWindow();


var marker, i;
for (i = 0; i < locations.length; i++) {

    console.log(locations[i]);


    var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon);

    marker = new google.maps.Marker({
        position: myLatLng,
        map: map
    });
     google.maps.event.addListener(marker, 'click', function(evt) {
  var mark = this;
  geocoder.geocode({
    location: evt.latLng
  }, function(results, status) {
    if (status == "OK") {
      infowindow.setContent(results[0].formatted_address + "<br>" + results[0].geometry.location.toUrlValue(6));
      infowindow.open(map, mark);
    }
  });
    });
   };
  }

 google.maps.event.addDomListener(window, "load", initMap);
 </script>
 </body>
 </html>

Answer 1

您可以使用google.maps.Map类的fitBounds（）方法

https://developers.google.com/maps/documentation/javascript/reference#Map

您可以修改代码中的initMap（）函数，引入边界并调用fitBounds（）。查看以//Added:

开头的评论

function initMap() {
    debugger;

    var locationsJSON = <?php echo json_encode($json, JSON_PRETTY_PRINT) ?>;

    var locations = locationsJSON;
    for (i = 0; i < locations.length; i++) {

        if(location[i].city_id==1)
        {
            var map = new google.maps.Map(document.getElementById('map'), 
               {
                   zoom: 4,
                   center: new google.maps.LatLng(31.5546, 74.3572),
                   mapTypeId: google.maps.MapTypeId.ROADMAP
               });
         }
         else if(location[i].city_id==2)
         {

             var map = new google.maps.Map(document.getElementById('map'), {
                 zoom: 4,
                 center: new google.maps.LatLng(25.2048,55.2708),
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             }); 

         }
     }
     var geocoder = new google.maps.Geocoder();
     var infowindow = new google.maps.InfoWindow();

     //Added: create bounds
     var bounds = new google.maps.LatLngBounds(); 

     var marker, i;
     for (i = 0; i < locations.length; i++) {

         console.log(locations[i]);


         var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon);

         marker = new google.maps.Marker({
             position: myLatLng,
             map: map
         });

         //Added: extend bounds with new coordinate
         bounds.extend(myLatLng);

         google.maps.event.addListener(marker, 'click', function(evt) {
             var mark = this;
             geocoder.geocode({
                 location: evt.latLng
             }, function(results, status) {
                 if (status == "OK") {
                     infowindow.setContent(results[0].formatted_address + "<br>" + results[0].geometry.location.toUrlValue(6));
                     infowindow.open(map, mark);
                 }
              });
          });
      };

      //Added: fit the bounds
      map.fitBounds(bounds);
  }

希望这有帮助！

如何根据city_id使地图居中？

1 个答案: