Google Maps v3同步和更新标记

时间:2013-03-16 19:12:44

标签: javascript jquery google-maps jquery-mobile google-maps-api-3

今天早上我花了一些简单但同时灵活的东西来用于小公司或团体的快递服务/在地图中组织他们自己和订单/目的地。虽然几个小时后我放弃了搜索万亿篇帖子:)并审查了许多商业软件。我花了最后一小时制作自己的应用程序然后得到了自己的工作应用程序,但是我想到了很多问题,所以我想开始使用它的开源项目,并用这个简短的介绍和代码与你们分享,希望也许我找到了一些好的答案或好主意。如何使其在任何浏览器,包括移动互联网在内的任何设备上使用都高效。 :)。 我坚持找到适当的方法如何基本上实时地保持地图的最新状态。 setInterval的!?无论如何,我的所有浏览器都会在一段时间后冻结并停止更新,而我希望它可以在需要时全天候运行24/7/365。我真的很感激,如果有人能引导我至少正确的方向,使这个同步更稳定。 谢谢你!

Clobal Gonfig

/***********************************
* Config
************************************/
/* Master Server    */  var master_server       = {
    url             : 'https://0.0.0.0/',
    status          : false,
    connectionFail  : "Connection to Master Server Failed"
}
/* Slave Server     */  var slave_server        = {
    url             : 'https://0.0.0.0/',
    status          : false,
    connectionFail  : "Connection to Slave Server Failed"
}
/* Sync controller  */  var sync_controller     = '/datasync/';
/* Sync actions     */  
var sync_action         = {
    updateLatLng    : 'updatewithgeo/'
}
/***********************************/
var car             = false;
var order           = false;
var order_icon      = "static_icon.png";
var customMsg       = {
    PositionFail    : "Because Default lat lng and getCurrentPosition are not set app will not try to sync! It will try again shotwhile"
}
// Can define default lat lng
var lat         = false;
var lng         = false;
/***********************************/

应用

function syncData()
{
//Temporarly clearing markers to avoid marker[$i] to be duplicated if position is changed
if(markers){$('#map_canvas').gmap('clear', 'markers');}
// Exhange data with server
$('#map_canvas').gmap('getCurrentPosition', function(position, status) {
    if ( status === 'OK' ) {
        lat = position.coords.latitude;
        lng = position.coords.longitude;
    }
    if (!lat){
        console.log(customMsg.PositionFail);
        setTimeout('syncData()', 10000);
        throw new Error(customMsg.PositionFail);
        return;
    }
    $.post(master_server.url+sync_controller+sync_action.updateLatLng, {latlng : lat+"@"+lng}, function(data, Server_1_Status) {

        if(Server_1_Status != 'OK')
        {
            // If request to master server then here would be place to connect to slave server(s)
            console.log(master_server.connectionFail);
            setTimeout('syncData()', 10000);
            throw new Error(master_server.connectionFail);
            return;
        }
        // If there is no errors
        $.each( data.couriers, function(i, courier) {
            // If markers are identified correctly when they are returned from server
            // then addMarker should only add new markers and 
            // existing markers shuld be updated (setPosition)

            $('#map_canvas').gmap('addMarker', { 
                'position': new google.maps.LatLng(courier.latitude, courier.longitude), 
                'bounds': true,
                'icon' : courier.icon,
                'title' : courier.name
            }).click(function() {
                $('#map_canvas').gmap('openInfoWindow', { 'content': courier.content }, this);
            });
        });
        $.each( data.orders, function(i, order) {
            $('#map_canvas').gmap('addMarker', { 
                'position': new google.maps.LatLng(order.latitude, order.longitude), 
                'bounds': true,
                'title' : order.address,
                'icon' : ""
            }).click(function() {
                // Populating order view and forms to take / confirm delivery and send digital signature
                $('#OrderViewTitle').html('<h1>'+order.orderID+order.address+'</h1>');
                $('#OrderData').html('<p><b>'+order.customerID+'</b><br><b>Order:</b>'+order.salesorder+'</p>');
                document.getElementById('TakeDelivery').value = order.orderID;
                document.getElementById('DeliveryComplete').value = order.orderID;
                $('#OrderView').popup("open");
            });
        });
    }, "json");

    $('#map_canvas').gmap('refresh');
    setTimeout('syncData()', 10000);
}); 
}
$(document).ready(function() {
courierApp.add(function() {
    $('#map_canvas').gmap().bind('init', function() {
        syncData();
});
    }).load();
});

0 个答案:

没有答案