让Google地图标记实时工作 [英] Getting Google Map Marker To Work In Realtime

查看:109
本文介绍了让Google地图标记实时工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我希望我的标记能够实时更新它们的位置 - 但这并不像它第一次看到的那样容易。希望你们能帮忙。

 <?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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆