让Google地图标记实时工作 [英] Getting Google Map Marker To Work In Realtime
问题描述
<?php
$ latitude =55.0567842;
$ longitude = - 1.599155200000041;
$ name =Jim;
$ lat =55.0567842;
$ long = - 1.599155200000041;
$ b $ echo $(
<!DOCTYPE html>
< html>
< head>
< style>
#map {
height:100%;
}
html,body {
height: 100%;
保证金:0;
填充:0;
}
< / style>
< ; / head>
< body onload ='refreshDiv()'>
< div id ='map'>< / div>);
echo(
脚本>
函数initMap(){
var map = new google。 maps.Map(document.getElementById('map'),{
zoom:10,
center:{lat:。$ latitude。,lng:。$ longitude。}
));
//每秒重载函数
函数refreshDiv()
{
setMarkers(map);
var refresher = setTimeout('refreshDiv()',1000);
}
}
函数setMarkers(map ){
var beaches = [['。。$ name。'',。$ lat。,。$ long。],];
//向地图添加标记。 b
$ b //标记大小表示为X,Y的大小,其中图像
//(0,0)的原点位于图像的左上角
//标记的起始点,定位点和坐标在X
//方向向右和向下Y方向增加
var image = {
url:'1.png',
//这个标记宽20像素,高32像素。
size:new google.maps.Size(20,32),
//此图片的来源是(0,0)。
origin:new google.maps.Point(0,0),
//此图像的锚点是(0,32)处旗杆的底部。
anchor:new google.maps.Point(0,32)
};
//形状定义图标的可点击区域。该类型定义了HTML
//< area>元素'poly'将多边形描绘为一系列X,Y点。
//最后一个坐标通过连接到第一个坐标来关闭poly。
var shape = {
coords:[1,1,20,18,20,18,1],
类型:'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>);
?>
正如我所说的,问题可能在于initMap()。
var markerStore = {} ; //用于在第一个循环中存储标记的变量Decleration
//在屏幕上生成地图
函数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),myOp tions);
var infowindow = new google.maps.InfoWindow(),marker,lat,lng;
//在间隔后更新地图上的标记
setInterval(function(){
//从PHP获取JSON MYSQL数据格式将在注释中
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)){
//现在,这只会更新地图上的标记
markerStore [id] .setPosition(new google.maps.LatLng(lat,lng));
} else {
//首先绘制标记然后更新MarkerStore是否具有自己的属性,如底部定义
marker = new google.maps.Marker({
position:new google.maps .LatLng(lat,lng),
名称: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);
PHP中的JSON数据
[{number:+ 923333018444,platenumber:KIG-5852,lat:25.144211,lng:67.125094,id:1} ,{ 号: + 923323027999, platenumber: KEI-4999, LAT: 25.006551, LNG: 67.354573, ID: 2}]
Im wanting my markers to update their location in realtime - but this is not as easy as it first looked. Hope you guys can help out.
<?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> ");
?>
As I said the problem may lie around the initMap(). Is there a way to reload the marker after the initMap() is loaded.
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);
JSON DATA FROM PHP
[{"number":"+923333018444","platenumber":"KIG-5852","lat":"25.144211","lng":"67.125094","id":"1"},{"number":"+923323027999","platenumber":"KEI-4999","lat":"25.006551","lng":"67.354573","id":"2"}]
这篇关于让Google地图标记实时工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!