[英]How to dynamically modify Google Maps Heatmap locations with data from database
[英]Retrieve locations data from Firebase for google maps circles
所以我遇到了这个问题,即 google maps Javascript API 无法解释位置数据(纬度、经度和半径(用于圆形标记))。 我已成功从 Firebase(警报测试)检索数据,但 google 地图似乎存在问题。 我的朋友说这是因为存储在 Firebase 中的数据是字符串,但不是因为我已经通过减法/乘法和其他数学内容进行了测试。
<!-- jQuery -->
<script
src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<!-- Firebase -->
<script src='https://cdn.firebase.com/js/client/2.1.0/firebase.js'> </script>
<title>View lightning map</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// RADIUS VARIABLE
var rad;
var lat;
var log;
function retrieve (){
var x = 1;
var messagesRef = new Firebase("https://glaring-torch-4299.firebaseio.com/");
messagesRef.once('child_added', function(snapshot) {
var data = snapshot.val();
// UNTUK TEST
alert(data.latitude +" "+ data.longitude +" "+data.radius);
lat = data.latitude;
log = data.longitude;
rad = data.radius;
alert (lat + " " + log + " " + radius);
// UNTUK TEST
x++;
});
}
retrieve();
var latlang = {lat: lat, lng: log};
// center map
var citymap = {
chicago: {
center: latLang
}
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: latlang,
});
// Construct the circle for each value in citymap.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: latLang,
radius: rad
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSdOKkpLmCe-
dMQ2XqfcReIvro396CGtk&signed_in=true&callback=initMap"></script>
</body>
</html>
如果你的地图上只有一个圆圈,你可以删除citymap
变量,你的代码可以简化:
// retrieve the data necessary for a single circle
function retrieve() {
var messagesRef = new Firebase("https://glaring-torch-4299.firebaseio.com/");
messagesRef.once('child_added', function (snapshot) {
var data = snapshot.val();
var lat = data.latitude;
var lng = data.longitude;
var rad = data.radius;
initMap(lat, lng, rad);
});
}
function initMap(lat, lng, radius) {
// Create the map.
var latLng = new google.maps.LatLng(lat, lng);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: latLng
});
// create the circle
var circle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: {
lat: lat,
lng: lng
},
radius: parseFloat(radius)
});
}
没关系,问题在于firebase,因为谷歌地图在从firebase获取latlang数据之前已经绘制了地图。
我所做的是在 initmap 函数中将 firebase 检索函数放在 var map 进程之前。 非常感谢您的帮助,谢谢!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.