如何设置Google地图缩放级别以显示中心的所有标记和用户？

时间：2016-04-16 12:28:21

标签： javascript google-maps google-maps-api-3

我正在创建一个传输应用，用户可以点击各种驱动程序来选择它们。

我在数据库中放置不同的驱动程序：

function multimarker(map) {
    jQuery.ajax({
        url: baseurl + "getdriverlocation.php",

        async: true,
        success: function (data) {
            var myArray = jQuery.parseJSON(data); // instead of JSON.parse(data)

            jQuery(myArray).each(function (index, element) {
                driverlat = element.driver_lat;
                driverlng = element.driver_lng;
                loginid = element.loginid;
                locations.push([driverlat, driverlng, loginid])
            });

            var bounds1 = new google.maps.LatLngBounds();

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

                var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
                if (google.maps.geometry.spherical.computeDistanceBetween(latlng1, map.getCenter()) < 30000) {
                    drivermarker = new google.maps.Marker({
                        position: latlng1
                    });
                    drivermarker.setMap(map);

                    google.maps.event.addListener(drivermarker, 'click', (function (drivermarker, i) {
                        return function () {
                            driverdetail(locations[i][2]);
                        }
                    })(drivermarker, i));
                    bounds1.extend(latlng1);
                    map.fitBounds(bounds1);
                }
            }
        }
    });
}

并将用户设置为当前位置：

function currentpostionmap() {
    $(document).on("pageshow", "#inside123", function () {
         
        if (navigator.geolocation) {
                    
            function success(pos) {            
                userClat = pos.coords.latitude;
                userClng = pos.coords.longitude;
                var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); 
                var myOptions = {            
                    zoom: 15,
                                center: latlng,
                                mapTypeId: google.maps.MapTypeId.ROADMAP        
                };        
                map = new google.maps.Map(document.getElementById("map"), myOptions);      
                var image123 = 'https:///developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
                marker = new google.maps.Marker({            
                    position: latlng,
                    map: map,
                    icon: image123                
                });
                var infowindow1 = new google.maps.InfoWindow();

                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow1.setContent('YOU');
                        infowindow1.open(map, marker);
                        map.setZoom(20);
                        map.setCenter(marker.getPosition());

                    }
                })(marker));
                multimarker(map);
            }        
            function fail(error) {          
                var latlng = new google.maps.LatLng(18.5204, 73.8567); 
                var myOptions = {            
                    zoom: 10,
                                center: latlng,
                                mapTypeId: google.maps.MapTypeId.ROADMAP        
                };        
                map = new google.maps.Map(document.getElementById("map"), myOptions);             
                marker = new google.maps.Marker({            
                    position: latlng,
                                map: map                   
                });
            }       
            navigator.geolocation.getCurrentPosition(success, fail, {
                maximumAge: 500000,
                enableHighAccuracy: true,
                timeout: 6000
            });    
        }
    });
}

如何将用户设置为中心并设置地图，以便用户可以在中心查看不同位置的所有标记？

注意：使用当前代码，我面临的问题是，如果驱动程序远离用户，则只能在中心查看驱动程序。用户必须拖动地图才能看到他们的位置。

1 个答案:

答案 0 :(得分：1)

您需要执行多步骤过程。

  1. 将所有标记和“用户”位置添加到google.maps.LatLngBounds对象
  2. 使地图适合该范围。
  3. 将地图中心设置为用户的位置。
  4. 验证所有标记是否仍然在视图中（当前地图边界包含计算的边界），如果不缩小一次。

    5. 代码段：

    var geocoder;
var map;
var locations = [
  [-33.890542, 151.274856, 'Bondi Beach'],
  [-33.923036, 151.259052, 'Coogee Beach'],
  [-34.028249, 151.157507, 'Cronulla Beach'],
  [-33.80010128657071, 151.28747820854187, 'Manly Beach'],
  [-33.950198, 151.259302, 'Maroubra Beach']
]

function initialize() {
  var pos = {
    coords: {
      latitude: -33.42502, //-33.8674869,
      longitude: 151.3422193 // 151.2069902
    }
  }
  userClat = pos.coords.latitude;
  userClng = pos.coords.longitude;
  var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map"), myOptions);
  var image123 = 'https:///developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
  //                var bounds = new google.maps.LatLngBounds();        
  marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: image123
  });
  var infowindow1 = new google.maps.InfoWindow();

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow1.setContent('YOU');
      infowindow1.open(map, marker);
      map.setZoom(20);
      map.setCenter(marker.getPosition());

    }
  })(marker));

  multimarker(map, latlng, infowindow1);

}

function multimarker(map, userloc, infowindow) {
  var bounds1 = new google.maps.LatLngBounds();

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

    var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
    // if (google.maps.geometry.spherical.computeDistanceBetween(latlng1, map.getCenter()) < 30000) {
    drivermarker = new google.maps.Marker({
      position: latlng1,
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
      map: map
    });
    drivermarker.setMap(map);

    google.maps.event.addListener(drivermarker, 'click', (function(marker, i) {
      return function(evt) {
        infowindow.setContent(locations[i][2]);
        infowindow.open(map, marker);
      }
    })(drivermarker, i));
    bounds1.extend(latlng1);
    map.fitBounds(bounds1);
    // }
  }
  bounds1.extend(userloc);
  map.fitBounds(bounds1);
  // wait for the bounds change to happen
  google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    // set the center on the user
    map.setCenter(userloc);
    // wait for the center to change
    google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
      // check to see if all the markers are still in bounds
      if ((!map.getBounds().contains(bounds1.getNorthEast())) ||
        (!map.getBounds().contains(bounds1.getSouthWest()))) {
        // if not zoom out one level
        console.log(map.getZoom() + " zoom-1 will be " + (map.getZoom() - 1));
        map.setZoom(map.getZoom() - 1);
      }
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);
    html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
    <script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

相关问题
最新问题