我正在创建一个交通应用程序，用户可以单击各种驱动程序来进行选择。
我正在从数据库放置不同的驱动程序:
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
});
}
});
}
如何将用户设置为中心并设置 map ，以便用户在中心时可以查看不同位置的所有标记？
注意:使用当前代码，我面临一个问题，如果驾驶员距离用户较远，则只能在中心看到驾驶员。用户必须拖动 map 才能看到他们的位置。
最佳答案
您需要执行多个步骤。
- 将所有标记和“用户”位置添加到
google.maps.LatLngBounds对象 - 使 map 适合该边界。
- 将 map 中心设置为用户的位置。
- 验证所有标记是否仍在 View 中(当前 map 边界包含计算出的边界)(如果没有缩小一次)。
代码片段:
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>关于javascript - 如何设置 Google map 缩放级别以在中心显示所有标记和用户？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36664183/