使用 html5 地理定位将标记坐标添加到 firebase 实时数据库
add marker coordinates to firebase real time database with html5 geolocation
<script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- Place this inside the HTML head; don't use async defer for now -->
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script>
<script>
var config = {
apiKey: "AIzaSyCWZjRe2CK8Hu2VN35AgZOQ7lQZKcI-UWM",
authDomain: "carrier-35d7c.firebaseapp.com",
databaseURL: "https://carrier-35d7c.firebaseio.com",
projectId: "carrier-35d7c",
storageBucket: "carrier-35d7c.appspot.com",
messagingSenderId: "827792028763"
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
//Create a node at firebase location to add locations as child keys
var locationsRef = firebase.database().ref("locations");
// Create a new GeoFire key under users Firebase location
var geoFire = new GeoFire(locationsRef.push());
</script>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 18
});
infoWindow = new google.maps.InfoWindow;
// 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.');
infoWindow.open(map);
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.');
infoWindow.open(map);
}
geoFire.set("User", [lat, lng]).then(()=>{
console.log("Location added");
}).catch(function(error) {
console.log(error);
});
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2nPlSt_nM7PSKD8So8anbUbBYICFWcCA&callback=initMap">
</script>
</body>
</html>
我无法将我的坐标添加到 firebase 实时数据库中。它一直说 lat is not defined 但我直接从 google 教程中复制了代码。
错误信息
未捕获的 ReferenceError:纬度未定义
在 homepage.html:94
第 94 行的代码是 geoFire.set("User", [lat, lng]).then(()=>{
我在这里定义了变量 lat 和 lng
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
我正在使用 Geofire 将其添加到数据库中。如果有人能帮我解决这个问题,我将不胜感激。
根据您的代码,lat
和 lng
未在函数外定义。因此,定义你的 lat
nad lng
函数外部,如:
var map, infoWindow;
var lat, lng;
并在函数内部设置值(地理位置)
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat= position.coords.latitude;
lng= position.coords.longitude;
var pos = {
lat: lat,
lng: lng
};...
我觉得这次一定要成功:)
编辑:
这次您可能会遇到另一个异步问题,因为 lat、lng 的设置值可能晚于 geoFire.set
,因此将其包装在函数中并在获得 lat、lng 后触发:
var pos = {lat: lat, lng: lng };
_setGeoFire();
...
function _setGeoFire(){
geoFire.set("User", [lat, lng]).then(()=>{
console.log("Location added");
}).catch(function(error) {
console.log(error);
});
}
不是:上面的position
和pos
是相同的值,所以,你不需要另一个pos变量。直接使用位置变量。或者改成 navigator.geolocation.getCurrentPosition(function(pos)...
<script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- Place this inside the HTML head; don't use async defer for now -->
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/geofire/4.1.2/geofire.min.js"></script>
<script>
var config = {
apiKey: "AIzaSyCWZjRe2CK8Hu2VN35AgZOQ7lQZKcI-UWM",
authDomain: "carrier-35d7c.firebaseapp.com",
databaseURL: "https://carrier-35d7c.firebaseio.com",
projectId: "carrier-35d7c",
storageBucket: "carrier-35d7c.appspot.com",
messagingSenderId: "827792028763"
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
//Create a node at firebase location to add locations as child keys
var locationsRef = firebase.database().ref("locations");
// Create a new GeoFire key under users Firebase location
var geoFire = new GeoFire(locationsRef.push());
</script>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 18
});
infoWindow = new google.maps.InfoWindow;
// 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.');
infoWindow.open(map);
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.');
infoWindow.open(map);
}
geoFire.set("User", [lat, lng]).then(()=>{
console.log("Location added");
}).catch(function(error) {
console.log(error);
});
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2nPlSt_nM7PSKD8So8anbUbBYICFWcCA&callback=initMap">
</script>
</body>
</html>
我无法将我的坐标添加到 firebase 实时数据库中。它一直说 lat is not defined 但我直接从 google 教程中复制了代码。
错误信息
未捕获的 ReferenceError:纬度未定义
在 homepage.html:94
第 94 行的代码是 geoFire.set("User", [lat, lng]).then(()=>{
我在这里定义了变量 lat 和 lng
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
我正在使用 Geofire 将其添加到数据库中。如果有人能帮我解决这个问题,我将不胜感激。
根据您的代码,lat
和 lng
未在函数外定义。因此,定义你的 lat
nad lng
函数外部,如:
var map, infoWindow;
var lat, lng;
并在函数内部设置值(地理位置)
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat= position.coords.latitude;
lng= position.coords.longitude;
var pos = {
lat: lat,
lng: lng
};...
我觉得这次一定要成功:)
编辑:
这次您可能会遇到另一个异步问题,因为 lat、lng 的设置值可能晚于 geoFire.set
,因此将其包装在函数中并在获得 lat、lng 后触发:
var pos = {lat: lat, lng: lng };
_setGeoFire();
...
function _setGeoFire(){
geoFire.set("User", [lat, lng]).then(()=>{
console.log("Location added");
}).catch(function(error) {
console.log(error);
});
}
不是:上面的position
和pos
是相同的值,所以,你不需要另一个pos变量。直接使用位置变量。或者改成 navigator.geolocation.getCurrentPosition(function(pos)...