2013-05-07 48 views
2

我有一個jsp頁面,我們選擇對象,並通過提交表單路由它將在谷歌地圖上顯示通過從db中獲取緯度。現在,我需要使用ajax.Pls刷新地圖幫助我如何做到這一點我有一個jsp頁面,我們選擇對象,並通過提交表單路由它的旅行

+0

你提的問題不夠清晰,分享你的代碼的某些行吧。 – 2013-05-07 05:27:48

+0

我相信谷歌有說明如何獲得他們的數據,看看。然後學習如何使用ajax(GWT將是一個合理的選擇,Google無疑與Google很好地結合)並應用這些知識。 – jwenting 2013-05-07 05:32:29

回答

0

試試這個

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE html> 

<html> 
    <head> 

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> 
<style type="text/css"> 
    #map_canvas { 
    width:550px; 
    height:400px; 
} 
</style> 

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
     function initialize(){ 
     var center= new google.maps.LatLng(10.012552,76.327043); 
     var myOptions = { 
       zoom: 16, 
       center: center, 
       mapTypeControl: true, 
       mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
       navigationControl: true, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
     }  
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var polylineCoordinates = [ 
     new google.maps.LatLng(10.013566,76.331549), 
     new google.maps.LatLng(10.013566,76.331463), 
     new google.maps.LatLng(10.013503,76.331313), 
     new google.maps.LatLng(10.013482,76.331205), 
     : 
     : 
     : 
     ];// here instead of this apply your logic to retrieve latitude and longitude values from your database 

      marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(10.012404,76.32622), 
      icon: { 
       path: google.maps.SymbolPath.CIRCLE, 
       scale: 3.5, 
       strokeColor: '#FF3300' 
      }, 
      draggable: true, 
      map: map 
      });   
     var polyline = new google.maps.Polyline({ 
      path: polylineCoordinates, 
      strokeColor: '#5C5CE6', 
      strokeOpacity: 2.0, 
      strokeWeight: 5, 
      editable: false 
     }); 

     polyline.setMap(map);  
} 

$(document).ready(function(){ 
    setInterval(function(){ 
    $('.load_tweets').load('index1.jsp'); 
    },30000); 
}); 

     </script> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ 
libs/jquery/1.3.0/jquery.min.js"></script> 
<script type="text/javascript"> 
var auto_refresh = setInterval(
function() 
{ 
$('#load').load('index1.jsp').fadeIn("slow"); 
}, 1000); // refresh every 10000 milliseconds 

</script> 
    </head> 
    <body onload="initialize();"> 
     <div id="map_canvas" ></div><br> 
     <div id="load"> </div> 
    </body> 
</html> 
相關問題