如何在注册时使用 google 地图 api 在全球地图中自动显示注册用户的地理位置?
How can I show automatically registered users geolocation in a global map with google maps api as they register?
我正在尝试在地图中显示网站上所有用户的地理位置。通过 google 地图 API 文档,我有办法显示我作为用户的位置。但是,我如何才能显示网站上注册人员的所有地理位置?
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
创建 google.maps.Marker()
类型的对象,使用其 setPosition
函数设置位置并使用 setMap
函数将其添加到您的地图。
示例(Lat/Lng 是德国的中心 - 在此处插入您的用户坐标):
var marker=new google.maps.Marker();
// use your registered user coordinates here
marker.setPosition(new google.maps.LatLng(48.14544, 8.19208));
marker.setMap(map);
此外,您可以使用边界让地图自动缩放,让每个标记都可见:
var bounds=new google.maps.LatLngBounds();
...
bounds.extend(marker.getPosition());
...
map.fitBounds(bounds);
我正在尝试在地图中显示网站上所有用户的地理位置。通过 google 地图 API 文档,我有办法显示我作为用户的位置。但是,我如何才能显示网站上注册人员的所有地理位置?
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
创建 google.maps.Marker()
类型的对象,使用其 setPosition
函数设置位置并使用 setMap
函数将其添加到您的地图。
示例(Lat/Lng 是德国的中心 - 在此处插入您的用户坐标):
var marker=new google.maps.Marker();
// use your registered user coordinates here
marker.setPosition(new google.maps.LatLng(48.14544, 8.19208));
marker.setMap(map);
此外,您可以使用边界让地图自动缩放,让每个标记都可见:
var bounds=new google.maps.LatLngBounds();
...
bounds.extend(marker.getPosition());
...
map.fitBounds(bounds);