<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API Example</title>
<script
src=" http://ditu.google.cn/maps?file=api&v=2&"
type="text/javascript"></script>
<script
src="http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/src/labeledmarker.js"
type="text/javascript">
</script>
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"
type="text/javascript">
</script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
/**
* 这个例子演示了 Google Map API 的以下功能:
* * 地图平移
* * 事件处理（鼠标移动）
* * 和文档模型(DOM)交互
*
* @author haogang
*/
var map; // 全局的地图对象
var zoomDelta = 1; // 放大的级别
function marks() {
var markerarr = new Array();
// 为所有标记创建指定阴影、图标尺寸灯的基础图标
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
// 创建信息窗口显示对应给定索引的字母的标记
function createMarker(point) {
// Create a lettered icon for this point using our icon class
var letter = "abc";
var letteredIcon = new GIcon(baseIcon);
letteredIcon.image = "../images/aa.png";
// 设置 GMarkerOptions 对象
markerOptions = {
icon : letteredIcon
};
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
var longitude = marker.getLatLng().lat();
var latitude = marker.getLatLng().lng();
$.post("../security/abnormalview!getViewByTS.action", {
x : longitude,
y : latitude
}, function(data, textStatus) {
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
marker.openInfoWindowHtml("标记 <b>" + data.latitude
+ "</b></br>内容<b>" + data.areaInfo.aret
+ "</b>");
}, "json");
});
return marker;
}
//得到xml文件中的地理信息经纬度
GDownloadUrl("../xml/markers.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for ( var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i]
.getAttribute("lat")), parseFloat(markers[i]
.getAttribute("lng")));
//markerarr.push(new GMarker(point));
var marker = createMarker(point);
//添加点击事件，连数据库
//GEvent.addListener(marker, "click", function() {
//var point = marker.getLatLng();
//var lat = point.lat();
//var lng = point.lng();
//发送请求
// $.post("../security/abnormalview.action", { x: lng, y: lat },
// function (data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
// this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
// alert(data.result);
// var result = $.parseJSON(data);
// }, "json");
//alert("您点击了图标。");
//var myHtml = "<b>#369</b><br/>"
//map.openInfoWindowHtml(point, myHtml);
//});
//添加到数组中
markerarr[i] = marker;
}
});
//alert("基站总数为"+markerarr.length);
return markerarr;
}
/**
* 创建地图控件，并添加一些基本的控件
*/
function load() {
if (GBrowserIsCompatible()) {
var elemMap = document.getElementById('map');
map = new GMap2(elemMap);
// 给地图添加内置的控件，分别为：
// 平移及缩放控件（左上角）、比例尺控件（左下角）
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
// 将视图移到潍坊
map.setCenter(new GLatLng(36.71299, 119.15698), 15);
var mgr = new GMarkerManager(map);
mgr.addMarkers(marks(), 14);
//刷新显示
mgr.refresh();
//添加点信息
GEvent.addListener(map, "moveend", function() {
alert("dddddddddddd");
map.clearOverlays();
mgr.refresh();
var zoom = map.getZoom();
if(zoom>17){
alert("ssssss");
//map.clearOverlays();
//map.removeOverlay(this);
//var markers2 = new Array();
//lng经度
//lat纬度
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var leftlongitude = southWest.lng();
var rightlongitude = northEast.lng();
var letflatitude = southWest.lat();
var rightlatitude = northEast.lat();
//
$.post("../security/abnormalview!getMarkInfoByTs.action", { leftlongitude: leftlongitude, rightlongitude: rightlongitude,letflatitude: letflatitude,rightlatitude: rightlatitude },
function (data, textStatus){
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
//this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
//alert(data.latitude);
//alert(data.areaInfo.aret);
//alert(data.)
//var list = data.lists;
// 为所有标记创建指定阴影、图标尺寸灯的基础图标
var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
//循环添加
for( var i = 0; i < data.length; i++) { // 可以遍历data数据
var test = data[i];
var lat = test.latitude;
var lng = test.longitude;
var point = new GLatLng(lat,lng);
//得到信号强度
var rxlevel = test.netinfo.rxlevel;
if(rxlevel>-85){
//根据信号强度来显示
var letteredIcon = new GIcon(baseIcon);
letteredIcon.image = "../images/aa.png";
markerOptions = {
icon : letteredIcon
};
var marker = new GMarker(point, markerOptions);
map.addOverlay(marker);
}
if(rxlevel>-95&&rxlevel<-85){
}
if(rxlevel<-95){
}
}
}, "json");
}
});
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 500px"></div>
</body>
</html>
分享到：
相关推荐
在这个项目中，JSP用于处理用户请求，控制页面逻辑，并与数据库进行交互。 2. **SQL**：SQL（Structured Query Language）是用于管理和操作关系数据库的标准语言。在这个项目中，SQL用于存储、检索、更新和管理网站...
JavaScript（简称JS）前台分页是一种常见的网页交互技术，它允许用户在不刷新整个页面的情况下，动态加载并显示大量数据的分段内容。这种技术在处理大数据集时尤其有用，可以提高用户体验，减少服务器压力。在JSP...
**JSP(JavaServer Pages)** 是一种...- **响应式设计**：利用CSS媒体查询确保论坛在不同设备上都能良好显示。 通过学习和实践这样的项目，开发者可以深入理解JSP、SSH、DIV和CSS在实际开发中的应用，提升Web开发技能。
在Pet_Shop中，JSP主要负责处理用户的请求，动态生成页面内容，如商品列表、购物车状态等，这使得网站能够根据用户的行为做出即时反应。 Servlet作为Java Web开发的重要组件，通常用于处理HTTP请求，执行业务逻辑，...
比如，每一页显示10条记录，服务器会根据当前页码计算出起始和结束的索引，然后返回相应范围的数据。 2. **Servlet与JSP的配合**：在实际应用中，分页逻辑往往由后台Servlet处理，包括计算总页数、获取当前页数据等...
1. **适应性设计**：确保模板在不同设备（如手机、平板、桌面电脑）上都能正常显示，考虑响应式布局，使界面能自适应不同屏幕尺寸。 2. **SEO优化**：合理使用HTML标签，如标题标签（`<title>`）、描述标签（`...
通过使用CSS，我们可以使新闻列表有序、易于阅读，同时提供良好的用户体验，比如响应式设计，使得系统在不同设备上都能正常显示。 在实际应用中，CSS可以采用内联样式、内部样式表（在`<head>`标签中使用`<style>`...
- **数据流程分析**：分析数据在系统内部流动的方式，包括输入、处理和输出过程。 - **数据字典**：定义系统中使用的数据项，包括属性、数据类型等。 - **运行环境及开发工具**：选择合适的硬件配置和开发工具，如...
HTML5的结构包括根元素，包含元数据（如关键词、描述、字符集设置等）和之间的内容不会显示在浏览器中，而包含了网页的可见内容，如文字、图片、链接和表单。 HTML5引入了新的标签，如导航、侧边栏、图例和图例说明...
【标题】"读书供求信息网前台+后台(Struts1.2)"所涉及的知识点主要集中在Struts1.2框架和MySQL数据库的使用上，同时，根据标签中的"css"，我们也可以推测该项目还包含了前端CSS样式的设计。接下来，我们将详细讨论...
1. **页面设置**：通过`<%@ page ... %>`指令设置页面语言为Java，并设定字符编码为UTF-8，确保不同语言的字符能正确显示。 2. **基础路径**：`<%=basePath%>`用于获取当前应用的根目录，这样可以确保链接和资源的...
例如，可以通过替换CSS文件实现不同的主题风格，通过修改JSP或Servlet代码来改变交互逻辑，或者调整数据库配置以适配不同环境。这个模板提供了一个快速启动项目的基础，节省了从零开始设计和编写代码的时间。 总的...
7. 数据交互：使用Ajax技术可以实现在不刷新整个页面的情况下与服务器交换数据，提升用户体验。例如，加载更多新闻、提交表单等操作。 8. 图像优化：农产品网站可能会展示大量产品图片，因此图像压缩、懒加载等技术...
在淘淘商城的前端工程中，CSS文件主要负责页面的布局、颜色、字体、边距等视觉效果。通过定义类选择器、ID选择器、元素选择器等，可以实现元素的定位、浮动、内联样式等复杂功能，从而打造出美观且用户体验良好的...
4. **可定制性**：为了满足不同网站的需求，购物车模板应允许开发者进行一定程度的定制，例如更改颜色方案、字体样式，甚至添加额外的功能模块。 在实现上，前端购物车模板通常基于HTML、CSS和JavaScript，利用AJAX...
在JSP页面中内联或通过外部链接引入CSS文件，可以有效地管理和控制整个网站的外观和风格，确保界面的一致性和美观性。 JavaScript是一种客户端脚本语言，通常用于增强用户交互体验。在这个班级建设网站中，...
它在传统的静态页面文件（*.html,*.htm）中加入JAVA程序片段和JSP标记，就构成了JSP页面。JSP具有以下的优点： 1、将业务层与表示层分离：使用JSP技术，网络开发人员可充分使用HTML来设计页面显示部分（如字体颜色...
- 自定义需求：作为个人使用，可以根据自己的需求定制报表格式，如添加自定义列，调整颜色主题等。 总结，这个项目展示了HTML和CSS如何构建一个简洁且实用的个人日报表。通过理解和应用这些技术，可以创建更多适应...
- **实现过程**：首先设计商品信息表结构，然后通过JSP页面收集用户输入的数据，并利用Java后端逻辑处理数据验证、存储等工作。 - **技术要点**：数据库设计、JSP表单提交、JavaBean对象映射等。 #### 2. 商品规格...