如何在谷歌地图中绘制所有路线

时间:2013-04-01 04:13:07

标签: java javascript android google-maps latitude-longitude

我在android中创建了一个应用程序,用于跟踪车辆并使用JavaScript在Web浏览器中可视化运动。移动时的Android应用程序将新的纬度和经度插入数据库,另一方面,Web应用程序使用该数据库显示在线跟踪。

不知怎的,我为一辆车做了那件事。

但是假设有五辆车,那么我们如何在Google-map中显示所有五个在线跟踪

任何人都可以告诉我该怎么做..

我的代码在下面给出

map.jsp

<html>
   <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <style type="text/css">
   body { font: normal 10pt Helvetica, Arial; }
    #map { width: 100%; height: 100%; border: 0px; padding: 0px; }
   </style>

   <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
   <script type="text/javascript">

   var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png");
   var center = null;
   var map = null;
   var currentPopup;
   var bounds = new google.maps.LatLngBounds();
   var markLAT,markLNG;
   var marker;

function moveMarker( map, marker, lat, lon) {

    marker.setPosition( new google.maps.LatLng( lat, lon ) );
    map.panTo( new google.maps.LatLng( lat, lon ) );

};


  function addMarker(lat, lng, info)
 { 
   var pt = new google.maps.LatLng(lat, lng);
   map.setCenter(pt);
   map.setZoom(17);
bounds.extend(pt);
marker = new google.maps.Marker(
{
    position: pt,
    icon: icon,
    map: map
});

var popup = new google.maps.InfoWindow(
{
    content: "Driver: Manu",
    maxWidth: 300
});

google.maps.event.addListener(marker, "click", function()
{
    if (currentPopup != null)
    {
        currentPopup.close();
        currentPopup = null;
    }
    popup.open(map, marker);
    currentPopup = popup;
   });
    google.maps.event.addListener(popup, "closeclick", function()
   {
    //map.panTo(center);
    //currentPopup = null;
   });
   }

function initMap()
{
 map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(10.013566, 76.331549),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions:
{
   style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
 }
 });

routePoints = [];
  $.getJSON('Coordinates', function(items)
  {

   for (var i = 0; i < items.length; i++) {
      (function(item) {
          if(i==items.length-1)
        addMarker(item.lat, item.lng,  item.lng);
        markLAT=items[i].lat;
        markLNG=items[i].lng;
    })(items[i]);
    routePoints.push(new google.maps.LatLng(items[i].lat,items[i].lng));
   }
   var route= new google.maps.Polyline({
    path: routePoints,
    strokeColor: '#FF0000',
    strokeOpacity: 2.0,
    strokeWeight: 5,
    editable: false
  });

  route.setMap(map);


  });

 center = bounds.getCenter();
 //map.fitBounds(bounds);

   }

 var auto_refresh = setInterval(
function ()
{
    $.getJSON('Updates', function(items)
  {

if(markLAT!=items[0].lat&&markLNG!=items[0].lng)
    {

    routePoints.push(new google.maps.LatLng(items[0].lat,items[0].lng));
    var route= new google.maps.Polyline({
    path: routePoints,
    strokeColor: '#FF0000',
    strokeOpacity: 2.0,
    strokeWeight: 5,
    editable: false
  });

  route.setMap(map);  
  //removeMarker(markLAT,markLNG);
  moveMarker(map,marker,items[0].lat,items[0].lng);
     markLAT=items[0].lat;
     markLNG=items[0].lng;        
    }
  });
//$('#load').load('index1.jsp').fadeIn("slow");
}, 1000); // refresh every 10000 milliseconds

   </script>
   <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">

</script>

    </head>
   <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
       <div id="load"> </div>
   <div id="map"></div>

    </html>

两个Servlet类Coordinates.java,Updates.java

Coordinates.java

package model;

import com.google.gson.Gson;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.Map;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Coordinates extends HttpServlet {
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException, ClassNotFoundException, SQLException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
             Connection connection;
             Class.forName("com.mysql.jdbc.Driver");
             String url="jdbc:mysql://144.76.19.105/iload?user=nidhish123&password=nidhish123";
             connection=DriverManager.getConnection(url);
             Statement statement = connection.createStatement();
             ResultSet set = statement.executeQuery("SELECT lat, lng from latng");
             ArrayList ar=new ArrayList();

             while(set.next())
             {
             Map<String, String> options = new LinkedHashMap<String, String>();
             options.put("lat", set.getString(1));
             options.put("lng", set.getString(2));
             ar.add(options);
             }
             String json = new Gson().toJson(ar); 
             response.setContentType("application/json");
             response.setCharacterEncoding("UTF-8");
             response.getWriter().write(json);
        } finally {            
            out.close();
        }
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            processRequest(request, response);
        } catch (ClassNotFoundException ex) {
            Logger.getLogger(Coordinates.class.getName()).log(Level.SEVERE, null, ex);
        } catch (SQLException ex) {
            Logger.getLogger(Coordinates.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        try {
            processRequest(request, response);
        } catch (ClassNotFoundException ex) {
            Logger.getLogger(Coordinates.class.getName()).log(Level.SEVERE, null, ex);
        } catch (SQLException ex) {
            Logger.getLogger(Coordinates.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>
}

Updates.java

package model;

import com.google.gson.Gson;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Updates extends HttpServlet {
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
             ArrayList ar=new ArrayList();
             boolean foundResults = false;
             ResultSet set = null;
             Statement statement = null;         
             String lat=null;
             String lng=null;
                    int count=0;
                        try 
                        {
                            Class.forName("com.mysql.jdbc.Driver");
                            Connection conn=DriverManager.getConnection("jdbc:mysql://144.76.19.105/iload", "nidhish123", "nidhish123");
                            statement = conn.createStatement();
                            set = statement.executeQuery("SELECT lat,lng FROM latng ORDER BY id DESC LIMIT 1");
                            while(set.next())
                            {
                                Map<String, String> options = new LinkedHashMap<String, String>();
                                options.put("lat", set.getString(1));
                                options.put("lng", set.getString(2));
                                ar.add(options);
                            }
                            conn.close(); 
                            String json = new Gson().toJson(ar); 
                            response.setContentType("application/json");
                            response.setCharacterEncoding("UTF-8");
                            response.getWriter().write(json);
                        }
                        catch(Exception e)
                        {
                            out.print(e);
                        }
        }catch(Exception s){
            System.out.println("ERROR!!!");
            s.printStackTrace();
        }
         finally {            
            out.close();
        }
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>
}

1 个答案:

答案 0 :(得分:0)

您可以将每个导航路径保存为Polyline,然后通过调用Polyline.setVisible(true)

循环渲染所有导航路径