2013-02-28 150 views
0

我有一个具有动态位置的标记(即定期更新)。点击标记时,会显示一个信息窗口,但当标记位置更新时,信息窗口会自动关闭。我希望当标记位置更新时,infowindow位置也应该自动更新。如何解决这个问题。永久谷歌地图Infowindow

P.S. : - infowindow包含一个可由用户编辑的表单。

问题:当用户正在编辑/填写表单并且标记位置得到更新(表单尚未提交)时,表单将被关闭,用户将丢失其数据。

<script type="text/javascript"> 
var map; 
var lat_longs = new Array(); 
var geocoder = null; 
var infoWindow = new google.maps.InfoWindow(); 
var trafficLayer = null; 
var weatherLayer = null; 
var markers = new Array(); 
var poi = new Array(); 
var fitMap = 0; 
loc_array = new Array(); 
totUpdateOld = new Array(); 
ident = 0; 


function showMap() { 
    var mapOptions = { 
     zoom: 5, 
     center: new google.maps.LatLng('-0.57128','117.202148'), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
    geocoder = new google.maps.Geocoder(); 
    trafficLayer = new google.maps.TrafficLayer(); 

    weatherLayer = new google.maps.weather.WeatherLayer({ 
     temperatureUnits: google.maps.weather.TemperatureUnit.CELCIUS 
    }); 

    showCarPosition(function() { 
     fitMapToBounds(); 
    }); 
} 

function showCarPosition(){ 
    if (markers.length>0){ 
     ident = 2; 
    } 
    var car_icon; 
    jQuery.getJSON('<s:property value="jsonUrl"/>','', function(data) { 
     var arrayCar = data.listCar; 
     for (var i = 0; i < arrayCar.length; i++) { 
      var car = arrayCar[i]; 
      var status = ""; 
      var tanggal = "never"; 
      var car_type = (car.type != "" || car.type != null)?' ('+car.type+')':''; 
      if(car.lastUpdate == null){ 
       car_icon = ctx + 'web/img/car_black.png'; 
       status = "Belum pernah kirim data"; 
      }else if((not_active = (currentdate - stringToDate(car.lastUpdate))/ 1000/60) >= 30){ //diff in minute 
       car_icon = ctx + 'web/img/car_red.png'; 
       status = convertMinute(not_active); 
      }else if((((currentdate - stringToDate(car.lastUpdate))/ 1000/60) >= 5) && (car.lastSpeed == 0)){ //diff in minute 
       car_icon = ctx + 'web/img/car_yellow.png'; 
       status = "Berhenti"; 
      }else    
       car_icon = ctx + 'web/img/car_green.png'; 
      if(car.lastUpdate != null){ 
       var splitDate = car.lastUpdate.split("T"); 
       tanggal = splitDate[1]+" "+splitDate[0].split("-")[2]+"-"+bulan[parseInt(splitDate[0].split("-")[1])]+"-"+splitDate[0].split("-")[0]; 
      } 

      var coordinate = new google.maps.LatLng(car.latitude, car.longitude); 
      var windowContent =[ 
        '<div class="windowcontent"><ul class="nav infowindow nav-pills nav-stacked">', 
        '<li class="active"><a href="viewcarlog?id='+car.id+'" class="viewlog">'+car.plate +car_type+' - '+ car.driverName +'</a></li>', 
        (status != null)?'<li>'+status+'</li>':'', 
        (car.phoneNumber != null)?'<li>Phone : ' + car.phoneNumber+ '</li>':'', 
        '<li>Last Temp : ' + car.lastTemp+ '</li>', 
        (parseInt(car.lastSpeed)>0)?'<li>Last Speed : ' + car.lastSpeed+ '</li>':'', 
        (car.type != "" || car.type != null)?'<li>Last Speed : ' + car.lastSpeed+ '</li>':'', 
        '<li>Last Connected : ' + tanggal+ '</li>', 
        '<li>'+((car.note != null)?car.note:'no notes')+'<li>', 
        '<div id="'+car.id+'"></div></ul>', 
        '<span id="'+car.id+'" onclick="editinfo(this, \''+car.note+'\');">Edit Note</span></div>'] 
        .join(''); 
      if (ident == 0){ 
       var marker = createMarker({ 
        map: map, 
        position: coordinate, 
        icon: car_icon, 
        labelContent: ((car.driverName == null)?car.plate:car.driverName)+'-'+car.lastSpeed, 
        labelAnchor: new google.maps.Point(32, 0), 
        labelClass: "unitlabel", 
        labelStyle: {opacity: 1.0} 
       }); 
       loc_array[car.id] = i; 
       bindInfoWindow(marker, 'click', windowContent); 
       google.maps.event.addListener(infoWindow, 'domready', function(){ 
        jQuery('.viewlog').click(function() { 
         jQuery.history.load(jQuery(this).attr('href')); 
         return false; 
        }); 
       }); 
      }else{ 
       if (car.totalUpdate > totUpdateOld[car.id]) { 
        var map_post = loc_array[car.id]; 
        markers[map_post].setMap(null); 
        var marker = updateMarker({ 
         map: map, 
         position: coordinate, 
         icon: car_icon, 
         labelContent: ((car.driverName == null)?car.plate:car.driverName)+'-'+car.lastSpeed, 
         labelAnchor: new google.maps.Point(32, 0), 
         labelClass: "unitlabel", 
         labelStyle: {opacity: 1.0} 
        }, map_post); 
        bindInfoWindow(marker, 'click', windowContent); 
        google.maps.event.addListener(infoWindow, 'domready', function(){ 
         jQuery('.viewlog').click(function() { 
          jQuery.history.load(jQuery(this).attr('href')); 
          return false; 
         }); 
        }); 
       } 
      } 
      totUpdateOld[car.id] = car.totalUpdate; 
     } 
     fitMapToBounds(); 
    }); 
    setTimeout("showCarPosition()",5000); 
} 

function createMarker(markerOptions) { 
    var marker = new MarkerWithLabel(markerOptions); 
    markers.push(marker); 
    lat_longs.push(marker.getPosition()); 
    return marker; 
} 

function updateMarker(markerOptions,id) { 
    var marker = new MarkerWithLabel(markerOptions); 
    markers[id] = marker; 
    lat_longs[id] = marker.getPosition(); 
    return marker; 
} 

function fitMapToBounds() { 
    var bounds = new google.maps.LatLngBounds(); 
    if (fitMap == 0){ 
     if (lat_longs.length>0) { 
      for (var i=0; i<lat_longs.length; i++) { 
       bounds.extend(lat_longs[i]); 
      } 
      map.fitBounds(bounds); 
      fitMap = 1; 
     } 
    } 
} 

function bindInfoWindow(marker, event, windowContent) { 
    google.maps.event.addListener(marker, event, function() { 
     infoWindow.setContent(windowContent); 
     infoWindow.open(map, marker); 
    }); 
} 

jQuery(document).ready(function() { 
    showMap(); 
}); 

</script> 

<div id="map_canvas" class="widgettitle" style="height:540px;"></div> 
+2

你能告诉我们你的代码吗? – duncan 2013-02-28 10:36:57

+0

可以很容易地完成,当标记更新时,然后将infowindow的信息保存到变量并将其传递到另一个窗口。共享代码,我会做修复 – 1Mayur 2013-02-28 12:10:48

+0

@Mayur&duncan,我已经添加了我的代码。 – 2013-03-01 03:52:31

回答

0

当标记位置改变时调用此函数。

infowindow.open(map,marker); 
+0

错误的答案,他的意思是说,如果窗口关闭或重新打开,他将丢失数据 – 1Mayur 2013-02-28 12:09:28

+0

@Mayur右侧,表单中的数据将丢失。我仍然等待你的回复Mayur, – 2013-03-11 09:34:46

0

将onblur事件处理程序放在调用暂停重定位的文本字段上。

然后,当它被提交并进入新的点时,重新启动它(如果需要)。