2013-02-28 178 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事件處理程序放在調用暫停重定位的文本字段上。

然後,當它被提交併進入新的點時,重新啓動它(如果需要)。