0
我们使用MySQL和PHP在常规间隔后存储当前位置坐标(经度和纬度)。这是我们的代码,用于根据从数据库中提取的位置坐标向地图添加标记。在Google Maps JavaScript API上自动更新标记位置
我想使用来自数据库的更新坐标自动更新地图上的标记位置,而无需刷新地图。我试图通过互联网搜索,但无法找到有助于实时更新坐标的解决方案。任何帮助将不胜感激。
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(lat , long),
mapTypeId: 'roadmap'
});
var iconBase = 'XXXXXXX';
var icons = {
spot: {
icon: 'XXXXXX'
},
0: {
icon: iconBase + 'XXXXX'
},
1: {
icon: iconBase + 'XXXX'
},
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
map.setCenter(marker.getPosition())
if(feature.type!="spot"){
var content = '<font color="#636363"><h3><img src="http://XXXX"> '+feature.rto+'<br><img style="vertical-align: middle" src="http://XXXXXXX"> <a style="text-decoration:none" href="tel:+91'+feature.phone+'">'+feature.phone+'</a></h3></font>';
}
else {
var content = '<b>Address: </b>'+feature.address+'<br><b>Information: </b>XXXXXXXX';
}
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,this);
};
})(marker,content,infowindow));
}
var features = [
{
<?php echo "position: new google.maps.LatLng(".$lat.", ".$long."),";
echo "type: 'spot',
address: '".$r['address']."'";
?>
}
<?php
$e = mysqli_fetch_assoc(mysqli_query($con, "select distpref,radius from XXXXX XXXXXXXXXXXXXXX"));
$er = $e['radius'];
$dp = $e['distpref'];
$sql = "SELECT *, ($dp * acos(cos(radians(" . $lat . ")) * cos(radians(latitude)) * cos(radians(longitude) - radians(" . $long . ")) + sin(radians(" . $lat . ")) * sin(radians(latitude)))) AS distance FROM markers HAVING distance<$er";
$result = mysqli_query($con, $sql);
while($row = mysqli_fetch_assoc($result)) {
echo ", {
position: new google.maps.LatLng(".$row['latitude'].", ".$row['longitude']."),
type: '".$row['type']."',
phone: '".$row['phone']."'
}";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap">
</script>`
任何替代解决方案也是可以接受的。
为实时更新坐标,您需要ajax调用php模块...您应该分割您的代码..在javascript部分中,用于呈现地图和基于事件的ajax调用PHP服务器端代码以检索新的COORDS并在阿贾克斯成功函数管理与新坐标地图的更新......长..路要走.. – scaisEdge
@scaisEdge我该怎么办呢?我可以调用ajax,但是如何更新标记的位置? –
在ajax调用中你有一个成功的函数...然后用这个函数可以调用一个简单的标记设置位置,例如:var latlng = new google.maps.LatLng(your_new_lat,your_new_lng); marker.setPosition(经纬度); – scaisEdge