2

オブジェクトを選択するjspページがあり、フォームを送信すると、移動したルートがdbから緯度経度を取得してGoogleマップに表示されます。ここで、ajax.Pls を使用してマップを更新する必要があります。これを行う方法を教えてください。

4

1 に答える 1

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>
于 2013-05-07T06:29:44.547 に答える