Javascript 让谷歌地图标记器实时工作
我希望我的标记能实时更新它们的位置,但这并不像最初看起来那么容易。希望你们能帮忙Javascript 让谷歌地图标记器实时工作,javascript,html,google-maps,Javascript,Html,Google Maps,我希望我的标记能实时更新它们的位置,但这并不像最初看起来那么容易。希望你们能帮忙 <?php $latitude="55.0567842"; $longitude="-1.599155200000041"; $name="Jim"; $lat="55.0567842"; $long="-1.599155200000041"; echo(" <!DOCTYPE html> <html> <h
<?php
$latitude="55.0567842";
$longitude="-1.599155200000041";
$name="Jim";
$lat="55.0567842";
$long="-1.599155200000041";
echo("
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onload='refreshDiv()'>
<div id='map'></div>");
echo("
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: ".$latitude.", lng: ".$longitude."}
});
// reloaded function every second
function refreshDiv()
{
setMarkers(map);
var refresher = setTimeout('refreshDiv()', 1000);
}
}
function setMarkers(map) {
var beaches = [['".$name."', ".$lat.",".$long."],];
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {
url: '1.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
for (var i = 0; i < beaches.length; i++) {
var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat: beach[1], lng: beach[2]},
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
</script> ");
echo("
<script async defer
src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBVQaENEYHY2g-mRhD6_tj1cSK8DhQoqHI&callback=initMap'>
</script>
</body>
</html> ");
?>
来自PHP的JSON数据
[{“编号”:“+923333018444”,“平板编号”:“KIG-5852”,“lat”:“25.144211”,“lng”:“67.125094”,“id”:“1”},{“编号”:“+923323027999”,“平板编号”:“KEI-4999”,“lat”:“25.006551”,“lng”:“67.354573”,“id”:“2”}]
已尝试此代码,但无法开始工作。你能帮忙吗。
var markerStore = {}; // Variable Decleration for Storing Markers on First loop
// Generate map on Screen
function myMap() {
var latlng = new google.maps.LatLng(24.946218, 67.005615);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
//Update Markers on Map after interval
setInterval(function (){
//Get JSON from PHP MYSQL Data format will be in comments
jQuery.getJSON('/cr/getloc.php', function(data){
for( var n in data ){
lat = data[ n ].lat;
lng=data[ n ].lng;
number=data[ n ].number;
platenumber=data[ n ].platenumber;
id=data[ n ].id;
if(markerStore.hasOwnProperty(id)) {
// Now this will just update markers only on map
markerStore[id].setPosition(new google.maps.LatLng(lat,lng));
} else {
// First Draw Markers Then Update if MarkerStore has own Property as defined in bottom
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
name:platenumber,
label:id,
id:id,
title:id,
map: map,
});
google.maps.event.addListener( marker, 'click', function(e){
infowindow.setContent( this.platenumber );
infowindow.open( map, this );
}.bind( marker ) );
markerStore[id] = marker;
}
}
});
}, 6000);