[英]How to set the Google Map zoom level to show all the markers and user at center?
我正在創建一個運輸應用程序,用戶可以在其中單擊各種驅動程序來選擇它們。
我從數據庫放置了不同的驅動程序:
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
});
}
});
}
如何將用戶設置在中心並以這樣的方式設置地圖,使得用戶可以在中心查看不同位置的所有標記?
注意:使用當前代碼,我面臨一個問題,即如果驅動程序離用戶很遠,則只能在中心查看驅動程序。 用戶必須拖動地圖才能看到他們的位置。
您需要執行一個多步驟過程。
google.maps.LatLngBounds
對象 代碼段 :
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.