<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Location on Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- Map css -->
<link href="../css/map.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="mapstyle.css" type="text/css" media="screen" />
<!-- Map has been localized to show the names, wherever available in ENGLISH (en) and country/region as INDIA -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&client=gme-hitecpointtechnologies&sensor=false&language=en®ion=in">
</script>
<script type="text/javascript" src="label.js"></script>
<script type="text/javascript" src="Fluster2.packed.js"></script>
<!-- Initialize timer script -->
<script type="text/javascript">
var timerID = null;
var timerRunning = false;
var delay = 20000;
var zoomToExtents = 0;
var openedInfoWindow = null;
function initializeTimer() {
zoomToExtents = 0;
initializeMap();
//PointOfInterest();
StopTheClock();
document.getElementById('side_bar').innerHTML = "Loading vehicles...";
StartTheTimer();
}
function StopTheClock() {
if (timerRunning)
clearTimeout(timerID)
timerRunning = false;
}
function StartTracking() {
StartTheTimer();
}
function StartTheTimer() {
readMapData();
timerRunning = true;
timerID = self.setTimeout("StartTracking()", delay)
}
function reCenter() {
var bound = new google.maps.LatLngBounds();
for (var i in gmarkers) {
bound.extend(gmarkers[i].getPosition());
}
map.fitBounds(bound);
zoomToExtents = 1;
}
// ================ read mapData ================
function readMapData() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "TRACKER_OUTPUT.aspx", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
markers = xmlDoc.getElementsByTagName("marker");
document.getElementById("side_bar").innerHTML = "refreshing data...";
var i = 0;
var lat;
var lng;
var name;
var drname;
var speed;
var lstdate;
var icon_type;
var loc;
// clear side bar list
side_bar_html = "";
// clear markers
if (gmarkers) {
for (i in gmarkers) {
gmarkers[i].setMap(null);
}
gmarkers.length = 0;
}
for (i = 0; i < markers.length; i++) {
lat = markers[i].getAttribute("lat");
lng = markers[i].getAttribute("lng");
name = markers[i].getAttribute("name");
lstdate = markers[i].getAttribute("lstdate");
icon_type = parseFloat(markers[i].getAttribute("type"));
loc = markers[i].getAttribute("loc");
//var currentTime = new Date();
var htmll = "<font size=1>" + name + "</font>";
var html = "<span style='font-family:Arial;font-size:12px;font-weight:bold;'>" + name + " <br/>DateTime - " + lstdate + "<br/>Latitude-" + lat + " <br/>Longitude-" + lng + "<br/>Location - " + loc + "</span>";
//html += '<br><a href="javascript: map.setCenter(new google.maps.LatLng(' + latlng.toUrlValue(6) + '));map.setZoom(' + zoom + ');">Zoom To</a>';
// define lat-long for positioning Marker
var myLatlng = new google.maps.LatLng(lat, lng);
var marker = createMarker(myLatlng, name, html, icon_type);
gmarkers.push(marker);
//PointOfInterest();
var label = new Label({
draggable: false,
map: map
});
label.bindTo('position', marker, 'position');
label.set('text', name);
// fit map to accomodate all markers (only for first time)
if (zoomToExtents == 0) {
if (i == markers.length - 1) {
var bound = new google.maps.LatLngBounds();
for (var k in gmarkers) {
bound.extend(gmarkers[k].getPosition());
}
map.fitBounds(bound);
zoomToExtents = 1;
}
}
}
}
// ================ create marker ================
var side_bar_html = "";
var gmarkers = [];
var vehmarkers = [];
var vmarkers = [];
var htmls = [];
var i = 0;
var icons = [];
icons[1] = new google.maps.MarkerImage("images/legends/IndexAnimatedManWalkingIcon.gif",
new google.maps.Size(41, 51),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34),
new google.maps.Size(40, 50));
icons[2] = new google.maps.MarkerImage("images/legends/moving.png");
icons[3] = new google.maps.MarkerImage("images/legends/hispeed.png"); //GreenIcon; // Moving
icons[4] = new google.maps.MarkerImage("images/legends/IndexAnimatedManWalkingIcon.gif",
new google.maps.Size(41, 51),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34),
new google.maps.Size(40, 50)); //ErrorIcon; // Unknown (Moving without Ignition On)
icons[5] = new google.maps.MarkerImage("images/legends/IndexAnimatedManWalkingIcon.gif",
new google.maps.Size(41, 51),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34),
new google.maps.Size(40, 50));
icons[6] = new google.maps.MarkerImage("images/legends/towed.png");
icons[7] = new google.maps.MarkerImage("images/legends/moving.png");
icons[8] = new google.maps.MarkerImage("images/legends/hispeed.png");
icons[9] = new google.maps.MarkerImage("images/legends/unreach.png");
icons[10] = new google.maps.MarkerImage("images/legends/unreach.png");
// ================ This function creates marker and associates info-window with it ================
function createMarker(myLatlng, name, html, icon_type) {
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: name,
icon: icons[icon_type],
optimized: false
});
var infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(marker, 'mouseover', function () {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close(map, marker);
});
google.maps.event.addListener(infowindow, 'closeclick', function () {
openedInfoWindow = null;
});
vmarkers[i] = marker;
htmls[i] = html;
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br/><div style="height:5px;border-top:dashed 1px #ccc;margin-top:5px;"></div>';
if (j == 1) {
document.getElementById('side_bar').innerHTML = side_bar_html;
}
i++;
return marker;
}
// ================ This function picks up the click and opens the corresponding info window ================
var marker = new Array();
function myclick(i) {
var infowindow = new google.maps.InfoWindow({
content: htmls[i]
});
if (openedInfoWindow != null) openedInfoWindow.close();
infowindow.open(map, vmarkers[i]);
openedInfoWindow = infowindow;
}
</script>
<!-- Initialize map here -->
<script type="text/javascript">
var map;
var j = 0;
function initializeMap() {
document.getElementById("map_canvas").style.backgroundImage = "url(maploading.jpg)";
var myOptions = {
zoom: 23,
center: new google.maps.LatLng(30.97, 76.77),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
j = 1;
}
// Asynchronous call
google.maps.event.addDomListener(window, 'load', initializeTimer);
</script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".trigger").click(function () {
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
</head>
<body>
<div id="container">
<div id="map_canvas" style="width: 100%; height: 580px;">
</div>
<div class="panel">
<div id="side_bar" style="padding: 7px 0 10px 7px; font-family: Arial; height: 360px;
overflow: auto;">
</div>
<div id="settings" style="border-top: dashed 1px #777;">
<a onclick="reCenter();" href="#" style="color: #0000B7; font-weight: normal;">Reset
Map</a> <br />
<a href="#" style="color: #0000B7; font-weight: normal;" onclick="InitializeTimer()">
Refresh</a></div>
</div>
<a class="trigger" href="#">ENTITY</a></div>
<noscript>
<b>JavaScript must be enabled in order for you to use Google Maps.</b> However,
it seems JavaScript is either disabled or not supported by your browser. To view
Google Maps, enable JavaScript by changing your browser options, and then try again.
</noscript>
</body>
</html>
在此代码中缩放级别不起作用。当缩放级别工作时，标记不会在谷歌地图上绘制。当谷歌地图上的标记图然后缩放级别不起作用时它采取默认缩放。我想默认设置缩放级别12。此代码从谷歌地图上的数据库和绘图标记中获取值。所以请帮我解决这个问题。