我在 android 中制作了一个应用程序，用于跟踪车辆并使用 JavaScript 在 Web 浏览器中可视化移动。移动时 android 应用程序将新的纬度和经度插入数据库中，而另一侧则由 Web 应用程序使用以显示在线跟踪。
不知何故，我为一辆车做到了。
但是假设有五辆车，那么我们如何在谷歌地图中显示所有五辆在线跟踪
谁能告诉我该怎么做..
我的代码如下
地图.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
坐标.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>
}
更新.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>
}