<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>便民设施系统</title>
<meta http-equiv="content-type" content="text/html; charset=gbk"/>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script
src="http://ditu.google.com/maps?file=api&v=2&
key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-
i1QfUnH94QxWIa6N4U6MouMmBA&h1=zh-CN"
type="text/
javascript"></script>
<script type="text/
javascript">
//实现框选放大缩小功能
function DragZoomControl(opts_boxStyle, opts_other, opts_callbacks) {
this.globals = {
draggingOn: false,
cornerTopDiv: null,
cornerRightDiv: null,
cornerBottomDiv: null,
cornerLeftDiv: null,
mapPosition: null,
outlineDiv: null,
mapW
idth: 0,
mapHeight: 0,
mapRatio: 0,
startX: 0,
startY: 0,
borderCorrection: 0
};
//设置边框的style
this.globals.style = {
opacity: .2,
fillColor: "#000",
border: "2px sol
id blue"
};
var style = this.globals.style;
for (var s in opts_boxStyle) {
style[s]=opts_boxStyle[s];
}
var borderStyleArray = style.border.split(' ');
style.outlineW
idth = parseInt(borderStyleArray[0].replace(/\D/g,''));
style.outlineColor = borderStyleArray[2];
style.alphaIE = 'alpha(opacity=' + (style.opacity * 100) + ')';
this.globals.backStack=[];
//其他选项
this.globals.options={
buttonHTML: 'zoom ...',
buttonStartingStyle:
{w
idth: '52px', border: '1px sol
id black', padding: '2px'},
buttonStyle: {background: '#FFF'},
backButtonHTML: 'zoom back',
backButtonStyle: {background: '#FFF', display: 'none'},
buttonZoomingHTML: 'Drag a region on the map',
buttonZoomingStyle: {background: '#FF0'},
overlayRemoveTime: 6000,
backButtonEnabled: false,
stickyZoomEnabled: false,
rightMouseZoomOutEnabled: false
};
for (var s in opts_other) {
this.globals.options[s] = opts_other[s]
}
//callbacks:buttonclick,dragstart,dragging,dragend,backbuttonclick
if (opts_callbacks == null) {
opts_callbacks = {}
}
this.globals.callbacks = opts_callbacks;
}
DragZoomControl.prototype = new GControl();
/**
*方法
*/
DragZoomControl.prototype.saveMapContext = function(text) {
if (this.globals.options.backButtonEnabled) {
this.saveBackContext_(text,true);
this.globals.backButtonDiv.style.display = 'block';
}
};
DragZoomControl.prototype.initiateZoom = function() {this.buttonclick_()};
DragZoomControl.prototype.initiateZoomBack = function() {
if (this.globals.options.backButtonEnabled) this.backbuttonclick_()};
DragZoomControl.prototype.initButton_ = function(buttonContainerDiv) {
var G = this.globals;
var buttonDiv = document.createElement('div');
buttonDiv.innerHTML = G.options.buttonHTML;
DragZoomUtil.style([buttonDiv], {cursor: 'pointer', zIndex:200});
DragZoomUtil.style([buttonDiv], G.options.buttonStartingStyle);
DragZoomUtil.style([buttonDiv], G.options.buttonStyle);
buttonContainerDiv.appendChild(buttonDiv);
return buttonDiv;
};
//初始化后退按钮
DragZoomControl.prototype.initBackButton_ = function(buttonContainerDiv) {
var G = this.globals;
var backButtonDiv = document.createElement('div');
backButtonDiv.innerHTML = G.options.backButtonHTML;
DragZoomUtil.style([backButtonDiv], {cursor: 'pointer', zIndex:200});
DragZoomUtil.style([backButtonDiv], G.options.buttonStartingStyle);
DragZoomUtil.style([backButtonDiv], G.options.backButtonStyle);
buttonContainerDiv.appendChild(backButtonDiv);
return backButtonDiv;
};
//设置按钮模式
DragZoomControl.prototype.setButtonMode_ = function(mode){
var G = this.globals;
if (mode == 'zooming') {
G.buttonDiv.innerHTML = G.options.buttonZoomingHTML;
DragZoomUtil.style([G.buttonDiv], G.options.buttonStartingStyle);
DragZoomUtil.style([G.buttonDiv], G.options.buttonZoomingStyle);
} else {
G.buttonDiv.innerHTML = G.options.buttonHTML;
DragZoomUtil.style([G.buttonDiv], G.options.buttonStartingStyle);
DragZoomUtil.style([G.buttonDiv], G.options.buttonStyle);
}
};
//初始化控件
DragZoomControl.prototype.initialize = function(map) {
var G = this.globals;
var me = this;
var mapDiv = map.getContainer();
// Create div for both buttons
var buttonContainerDiv = document.createElement("div");
DragZoomUtil.style([buttonContainerDiv], {cursor: 'pointer', zIndex: 150});
// create and init the zoom button
//DOM:button
var buttonDiv = this.initButton_(buttonContainerDiv);
// create and init the back button
//DOM:button
var backButtonDiv = this.initBackButton_(buttonContainerDiv);
// Add the two buttons to the map
mapDiv.appendChild(buttonContainerDiv);
//DOM:map covers
var zoomDiv = document.createElement("div");
var DIVS_TO_CREATE = ['outlineDiv', 'cornerTopDiv', 'cornerLeftDiv', 'cornerRightDiv', 'cornerBottomDiv'];
for (var i=0; i<DIVS_TO_CREATE.length; i++) {
var
id = DIVS_TO_CREATE[i];
var div = document.createElement("div");
DragZoomUtil.style([div], {position: 'absolute', display: 'none'});
zoomDiv.appendChild(div);
G[
id] = div;
}
DragZoomUtil.style([zoomDiv], {position: 'absolute', display: 'none', overflow: 'h
idden', cursor: 'crosshair', zIndex: 101});
mapDiv.appendChild(zoomDiv);
// add event listeners
GEvent.addDomListener(buttonDiv, 'click', function(e) {
me.buttonclick_(e);
});
GEvent.addDomListener(backButtonDiv, 'click', function(e) {
me.backbuttonclick_(e);
});
GEvent.addDomListener(zoomDiv, 'mousedown', function(e) {
me.coverMousedown_(e);
});
GEvent.addDomListener(document, 'mousemove', function(e) {
me.drag_(e);
});
GEvent.addDomListener(document, 'mouseup', function(e) {
me.mouseup_(e);
});
// get globals
G.mapPosition = DragZoomUtil.getElementPosition(mapDiv);
G.buttonDiv = buttonDiv;
G.backButtonDiv = backButtonDiv;
G.mapCover = zoomDiv;
G.map = map;
G.borderCorrection = G.style.outlineW
idth * 2;
this.setDimensions_();
//styles
this.initStyles_();
// disable text selection on map cover
G.mapCover.onselectstart = function() {return false};
return buttonContainerDiv;
};
DragZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(3, 120));
};
//鼠标按下事件
DragZoomControl.prototype.coverMousedown_ = function(e){
var G = this.globals;
var pos = this.getRelPos_(e);
G.startX = pos.left;
G.startY = pos.top;
if (e.which) {
var rightMouse = (e.which != 1);
} else if (e.button) {
var rightMouse = (e.button != 1);
}
G.draggingRightMouse = rightMouse;
DragZoomUtil.style([G.mapCover], {background: 'transparent', opacity: 1, filter: 'alpha(opacity=100)'});
DragZoomUtil.style([G.outlineDiv], {left: G.startX + 'px', top: G.startY + 'px', display: 'block', w
idth: '1px', height: '1px'});
G.draggingOn = true;
G.cornerTopDiv.style.top = (G.startY - G.mapHeight) + 'px';
G.cornerTopDiv.style.display ='block';
G.cornerLeftDiv.style.left = (G.startX - G.mapW
idth) +'px';
G.cornerLeftDiv.style.top = G.startY + 'px';
G.cornerLeftDiv.style.display = 'block';
G.cornerRightDiv.style.left = G.startX + 'px';
G.cornerRightDiv.style.top = G.startY + 'px';
G.cornerRightDiv.style.display = 'block';
G.cornerBottomDiv.style.left = G.startX + 'px';
G.cornerBottomDiv.style.top = G.startY + 'px';
G.cornerBottomDiv.style.w
idth = '0px';
G.cornerBottomDiv.style.display = 'block';
// invoke the callback if prov
ided
if (G.callbacks.dragstart != null) {
G.callbacks.dragstart(G.startX, G.startY);
}
return false;
};
//鼠标拖动事件
DragZoomControl.prototype.drag_ = function(e){
var G = this.globals;
if(G.draggingOn) {
var pos = this.getRelPos_(e);
var rect = this.getRectangle_(G.startX, G.startY, pos, G.mapRatio);
if (rect.left) {
addX = -rect.w
idth;
} else {
addX = 0;
}
if (rect.top) {
addY = -rect.height;
} else {
addY = 0;
}
DragZoomUtil.style([G.outlineDiv], {left: G.startX + addX + 'px', top: G.startY + addY + 'px', display: 'block', w
idth: '1px', height: '1px'});
G.outlineDiv.style.w
idth = rect.w
idth + "px";
G.outlineDiv.style.height = rect.height + "px";
G.cornerTopDiv.style.height = ((G.startY + addY) - (G.startY - G.mapHeight)) + 'px';
G.cornerLeftDiv.style.top = (G.startY + addY) + 'px';
G.cornerLeftDiv.style.w
idth = ((G.startX + addX) - (G.startX - G.mapW
idth)) + 'px';
G.cornerRightDiv.style.top = G.cornerLeftDiv.style.top;
G.cornerRightDiv.style.left = (G.startX + addX + rect.w
idth + G.borderCorrection) + 'px';
G.cornerBottomDiv.style.top = (G.startY + addY + rect.height + G.borderCorrection) + 'px';
G.cornerBottomDiv.style.left = (G.startX - G.mapW
idth + ((G.startX + addX) - (G.startX - G.mapW
idth))) + 'px';
G.cornerBottomDiv.style.w
idth = (rect.w
idth + G.borderCorrection) + 'px';
// invoke callback if prov
ided
if (G.callbacks.dragging != null) {
G.callbacks.dragging(G.startX, G.startY, rect.endX, rect.endY)
}
return false;
}
};
//鼠标弹起事件
DragZoomControl.prototype.mouseup_ = function(e){
var G = this.globals;
if (G.draggingOn) {
var pos = this.getRelPos_(e);
G.draggingOn = false;
var rect = this.getRectangle_(G.startX, G.startY, pos, G.mapRatio);
if (rect.left) rect.endX = rect.startX - rect.w
idth;
if (rect.top) rect.endY = rect.startY - rect.height;
this.resetDragZoom_();
var nwpx = new GPoint(rect.startX, rect.startY);
var nepx = new GPoint(rect.endX, rect.startY);
var sepx = new GPoint(rect.endX, rect.endY);
var swpx = new GPoint(rect.startX, rect.endY);
var nw = G.map.fromContainerPixelToLatLng(nwpx);
var ne = G.map.fromContainerPixelToLatLng(nepx);
var se = G.map.fromContainerPixelToLatLng(sepx);
var sw = G.map.fromContainerPixelToLatLng(swpx);
var zoomAreaPoly = new GPolyline([nw, ne, se, sw, nw], G.style.outlineColor, G.style.outlineW
idth + 1,.4);
try{
G.map.addOverlay(zoomAreaPoly);
setTimeout (function() {G.map.removeOverlay(zoomAreaPoly)}, G.options.overlayRemoveTime);
}catch(e) {}
var polyBounds = zoomAreaPoly.getBounds();
var ne = polyBounds.getNorthEast();
var sw = polyBounds.getSouthWest();
var se = new GLatLng(sw.lat(), ne.lng());
var nw = new GLatLng(ne.lat(), sw.lng());
if (G.options.rightMouseZoomOutEnabled && G.draggingRightMouse) {
var mapSpan = G.map.getBounds().toSpan();
var polySpan = polyBounds.toSpan();
var dSize = Math.max(mapSpan.lat()/polySpan.lat(), mapSpan.lng()/polySpan.lng());
var zoomLevel = G.map.getZoom() - Math.ceil(Math.log(dSize, 2));
} else {
var zoomLevel = G.map.getBoundsZoomLevel(polyBounds);
}
var center = polyBounds.getCenter();
G.map.setCenter(center, zoomLevel);
// invoke callback if prov
ided
if (G.callbacks.dragend != null) {
G.callbacks.dragend(nw, ne, se, sw, nwpx, nepx, sepx, swpx);
}
//re-init if sticky
if (G.options.stickyZoomEnabled) {
//GLog.write("stickyZoomEnabled, re-initting");
this.initCover_();
if (G.options.backButtonEnabled) this.saveBackContext_(G.options.backButtonHTML,false); // save the map context for back button
G.backButtonDiv.style.display='none';
}
}
};
//保存缩放尺寸
DragZoomControl.prototype.setDimensions_ = function() {
var G = this.globals;
var mapSize = G.map.getSize();
G.mapW
idth = mapSize.w
idth;
G.mapHeight = mapSize.height;
G.mapRatio = G.mapHeight / G.mapW
idth;
// set left:0px in next <div>s in case we inherit text-align:center from map <div> in IE.
DragZoomUtil.style([G.mapCover, G.cornerTopDiv, G.cornerRightDiv, G.cornerBottomDiv, G.cornerLeftDiv],
{top: '0px', left: '0px', w
idth: G.mapW
idth + 'px', height: G.mapHeight +'px'});
};
//初始化style
DragZoomControl.prototype.initStyles_ = function(){
var G = this.globals;
DragZoomUtil.style([G.mapCover, G.cornerTopDiv, G.cornerRightDiv, G.cornerBottomDiv, G.cornerLeftDiv],
{filter: G.style.alphaIE, opacity: G.style.opacity, background:G.style.fillColor});
G.outlineDiv.style.border = G.style.border;
};
//框选button的click事件
DragZoomControl.prototype.buttonclick_ = function(){
var G = this.globals;
G.backButtonDiv.style.display='none';
if (G.mapCover.style.display == 'block') { // reset if clicked before dragging
this.resetDragZoom_();
if (G.options.backButtonEnabled) {
this.restoreBackContext_(); // pop the backStack on a button reset
if (G.backStack.length==0) G.backButtonDiv.style.display='none';
}
} else {
this.initCover_();
if ( G.options.backButtonEnabled ) this.saveBackContext_(G.options.backButtonHTML,false); // save the map context for back button
}
};
//后退按钮的click事件
DragZoomControl.prototype.backbuttonclick_ = function(){
var G = this.globals;
if (G.options.backButtonEnabled && G.backStack.length > 0) {
this.restoreBackContext_();
// invoke the callback if prov
ided
if (G.callbacks['backbuttonclick'] != null) {
G.callbacks.backbuttonclick(G.methodCall);
}
}
};
//后退保存功能
DragZoomControl.prototype.saveBackContext_ = function(text,methodCall) {
var G = this.globals;
var backFrame = {};
backFrame["center"] = G.map.getCenter();
backFrame["zoom"] = G.map.getZoom();
backFrame["maptype"] = G.map.getCurrentMapType();
backFrame["text"] = G.backButtonDiv.innerHTML; // this saves the previous button text
backFrame["methodCall"] = methodCall; //This determines if it was an internal or method call
G.backStack.push(backFrame);
G.backButtonDiv.innerHTML = text;
// Back Button is turned on in resetDragZoom_()
};
//后退功能
DragZoomControl.prototype.restoreBackContext_ = function() {
var G = this.globals;
var backFrame = G.backStack.pop();
G.map.setCenter(backFrame["center"],backFrame["zoom"],backFrame["maptype"]);
G.backButtonDiv.innerHTML = backFrame["text"];
G.methodCall = backFrame["methodCall"];
if (G.backStack.length==0) G.backButtonDiv.style.display = 'none'; // if we're at the top of the stack, h
ide the back botton
};
//在地图上显示叠加层
DragZoomControl.prototype.initCover_ = function(){
var G = this.globals;
G.mapPosition = DragZoomUtil.getElementPosition(G.map.getContainer());
this.setDimensions_();
this.setButtonMode_('zooming');
DragZoomUtil.style([G.mapCover], {display: 'block', background: G.style.fillColor});
DragZoomUtil.style([G.outlineDiv], {w
idth: '0px', height: '0px'});
//invoke callback if prov
ided
if(G.callbacks['buttonclick'] != null){
G.callbacks.buttonclick();
}
};
//获得鼠标的坐标
DragZoomControl.prototype.getRelPos_ = function(e) {
var pos = DragZoomUtil.getMousePosition(e);
var G = this.globals;
return {top: (pos.top - G.mapPosition.top),
left: (pos.left - G.mapPosition.left)};
};
//当用户拉框时求的矩形
DragZoomControl.prototype.getRectangle_=function(startX,startY,pos,ratio){
var left=false;
var top=false;
var dX=pos.left-startX;
var dY=pos.top-startY;
if(dX<0){
dX=dX*-1;
top=true;
}
delta=dX>dY?dX:dY;
return{
startX:startX,
startY:startY,
endX:startX+delta,
endY:startY+parseInt(delta*ratio),
w
idth:delta,
height:parseInt(delta*ratio),
left:left,
top:top
}
};
//重置Buttonde的CSS
DragZoomControl.prototype.resetDragZoom_=function(){
var G=this.globals;
DragZoomUtil.style([G.mapCover,G.cornerTopDiv,G.cornerRightDiv,G.cornerBottomDiv,G.cornerLeftDiv],
{display:'none',opacity:G.style.opacity,fillter:G.style.alphaIE});
G.outlineDiv.style.display='none';
this.setButtonMode_('normal');
if(G.options.backButtonEnabled && (G.backStack.length>0))G.backButtonDiv.style.display='block';
};
var DragZoomUtil={};
//根据
ID取得元素
DragZoomUtil.gE=function(s
Id){
return document.getElementBy
Id(s
Id);
};
//取得DOM元素的绝对位置
DragZoomUtil.getMousePosition=function(e){
var posX=0;
var posY=0;
if(!e)var e=window.event;
if(e.pageX||e.pageY){
posX=e.pageX;
posY=e.pageY;
}else if(e.clientX||e.clientY){
posX=e.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft);
posY=e.clientY+(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop);
}
return {left:posX,top:posY};
};
//取得某一DOM元素的位置
DragZoomUtil.getElementPosition=function(element){
var leftPos=element.offsetLeft;
var topPos=element.offsetTop;
var parElement=element.offsetParent;
while(parElement!=null){
leftPos+=parElement.offsetLeft;
topPos+=parElement.offsetTop;
parElement=parElement.offsetParent;
}
return{left:leftPos,top:topPos};
};
//将style应用于DOM元素
DragZoomUtil.style=function(elements,styles){
if(typeof(elements)=='string'){
eiements=DragZoomUtil.getManyElements(elements);
}
for(var i=0;i<elements.length;i++){
for(var s in styles){
elements[i].style[s]=styles[s];
}
}
};
//根据DOM元素的集合
ID取得DOM元素
DragZoomUtil.getManyElements=function(
idsString){
var
idsArray=
idsString.split(',');
var eiement=[];
for(var i=0;i<
idsArray.length;i++){
eiements[elements.length]=DragZoomUtil.gE(
idsArray[i])
};
return eiement;
};
//实现搜索功能
var geocoder=null;
var map;
var contextmenu;
var GoogleGeocoder=null;
var GGeoAddressAccuracy=["Unkown location.",
"Country level accuracy.",
"Region (state,province,prefecture,etc.)level accuracy.",
"Sub-region(country,municipality,etc.)level accuracy.",
"Town(city,village)level accuracy.",
"Post code (zip code)level accuracy.",
"Street level accuracy.",
"Intersection level accuracy.",
"Address level accuracy.",
"Premise (building name,property name,shopping center,etc.)level accuracy."
];
var status=[];
status[G_GEO_SUCCESS]="Success";
status[G_GEO_MISSING_ADDRESS]="Missing Address";
status[G_GEO_UNKNOWN_ADDRESS]="Unknown Address";
status[G_GEO_UNAVAILABLE_ADDRESS]="Unavailable Address";
status[G_GEO_BAD_KEY]="Bad Key";
status[G_GEO_TOO_MANY_QUERIES]="Too Many Queries";
status[G_GEO_SERVER_ERROR]="Server Error";
function showLocation(){
//清除marker
map.clearOverlays();
document.getElementBy
Id('divOutput').innerHTML="搜索中...";
var address=document.getElementBy
Id('txtAddress').value;
geocoder.getLocations(address,cb_showLocation);
}
function cb_showLocation(result){
//显示结果
if(result.Status.code==G_GEO_SUCCESS){
//成功表明
document.getElementBy
Id("divOutput").innerHTML="成功("+result.Placemark.length+")<br/>";
for(var i=0;i<result.Placemark.length;i++){
var lat=result.Placemark[i].Point.coordinates[1];
var lng=result.Placemark[i].Point.coordinates[0];
var address=result.Placemark[i].address;//地址
var point=new GLatLng(lat,lng);
var marker=new GMarker(point,{title:i+1});;
map.addOverlay(marker);
document.getElementBy
Id("divOutput").innerHTML+=((i+1)+""+
address+"<small>"+point.toString()+"</small><br/>");
//(address"<a href=
javascript:go("+lat+","+lng+")>go</a><br/>");
}//for
}//if
else{
document.getElementBy
Id("divOutput").innerHTML=result.Status.code;
}//else
}
/**
* 这个例子演示了 Google Map API 的以下功能:
* * 可拖拽的标注
* * 在地图上覆盖折线
* * 计算地理距离
* * 事件处理（单击、拖拽）
* * 消息提示窗口（气泡窗口）
* * 利用链表维护各种
对象
* * 自定义控件
*
* 注意：为了在 IE6 中正常显示折线，必须在网页的 <HTML>
标签中加上：
* <html xmlns:v="urn:schemas-microsoft-com:vml">
*
* @author haogang
*/
/**
* 本示例用一个双向链表维护用户设定的标注，能够容易的实现标注的遍历和删除
* 每个链表结点 m 有如下字段：
* m.prev 前驱标注
* m.next 后继标注
* m.segPrev 连接本标注与前驱标注的线段
* m.segNext 连接本标注与后继标注的线段
*/
function GRulerControl() {
var me = this;
// 可国际化的字符串
me.RESET_BUTTON_TITLE_ = '清除所有测距标注';
me.ENABLE_BUTTON_TITLE_ = '添加测距标注已启用，单击这里禁用';
me.DISABLE_BUTTON_TITLE_ = '添加测距标注已禁用，单击这里启用';
me.DELETE_BUTTON_TITLE_ = '删除';
me.RESET_BUTTON_IMAGE_ = 'images/ruler_clear.png';
me.ENABLE_BUTTON_IMAGE_ = 'images/ruler_enabled.png';
me.DISABLE_BUTTON_IMAGE_ = 'images/ruler_disabled.png';
me.BACKGROUND_IMAGE_ = 'images/ruler_background.png'
me.KILOMETER_ = '公里';
me.METER_ = '米';
}
GRulerControl.prototype = new GControl();
/**
* 初始化标尺控件
*/
GRulerControl.prototype.initialize = function(map) {
var me = this;
var container = document.createElement('div');
/**
*默认位置在右上角
*/
GRulerControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(8, 30));
}
me.setButtonStyle_(container);
// “启用/禁用”按钮
var btnEnable = document.createElement('img');
btnEnable.w
idth = btnEnable.height = 20;
GEvent.addDomListener(btnEnable, 'click',
function() {
me.setEnabled(!me.isEnabled());
}
);
container.appendChild(btnEnable);
// “重置”按钮
var btnReset = document.createElement('img');
btnReset.w
idth = btnReset.height = 20;
btnReset.src = me.RESET_BUTTON_IMAGE_;
btnReset.title = me.RESET_BUTTON_TITLE_;
GEvent.addDomListener(btnReset, 'click',
function() {
me.reset();
}
);
container.appendChild(btnReset);
// 距离
标签
var txtInfo = document.createElement('div');
txtInfo.style.font = 'small Arial';
txtInfo.style.fontWeight = 'bold';
txtInfo.style.fontSize = '9pt';
txtInfo.style.w
idth = "82px";
container.appendChild(txtInfo);
// 初始化内部变量
map.rulerControl_ = me;
me.map_ = map;
me.head_ = new Object();
me.tail_ = new Object();
me.head_.next_ = me.tail_;
me.tail_.prev_ = me.head_;
me.btnEnable_ = btnEnable;
me.btnReset_ = btnReset;
me.txtInfo_ = txtInfo;
me.setEnabled(true);
map.getContainer().appendChild(container);
return container;
}
/**
* 设置控件的格式
*/
GRulerControl.prototype.setButtonStyle_ = function(button) {
button.style.backgroundImage = 'url(' + this.BACKGROUND_IMAGE_ + ')';
button.style.font = "small Arial";
button.style.border = "1px sol
id #888888";
button.style.padding = "4px";
button.style.textAlign = "right";
button.style.cursor = "pointer";
}
/**
* 用恰当的格式表示距离
*/
GRulerControl.prototype.formatDistance_ = function(len) {
var me = this;
len = Math.round(len);
if (len <= 1000) {
return len + ' ' + me.METER_;
} else if (len <= 1000000) {
return len / 1000 + ' ' + me.KILOMETER_;
}
return Math.round(len / 1000) + ' ' + me.KILOMETER_;
}
/**
* 格式化角度为字符串
*/
GRulerControl.prototype.formatDegree_ = function(value) {
value = Math.abs(value);
var v1 = Math.floor(value);
var v2 = Math.floor((value - v1) * 60);
var v3 = Math.round((value - v1) * 3600 % 60);
return v1 + '°' + v2 + '\'' + v3 + '"';
}
/**
* 格式化经纬度为字符串
*/
GRulerControl.prototype.formatLatLng_ = function(pt) {
var me = this;
var latName, lngName;
var lat = pt.lat();
var lng = pt.lng();
latName = lat >= 0 ? '北纬' : '南纬';
lngName = lng >= 0 ? '东经' : '西经';
return lngName + me.formatDegree_(lng) + '，'
+ latName + me.formatDegree_(lat);
}
/**
* 返回控件的默认位置
*/
GRulerControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(8, 8));
}
/**
* 返回控件是否已启用
*/
GRulerControl.prototype.isEnabled = function() {
return this.enabled_;
}
/**
* 设置控件的“启用/禁用"状态
*/
GRulerControl.prototype.setEnabled = function(value) {
var me = this;
if (value == me.enabled_)
return;
me.enabled_ = value;
if (me.enabled_) {
me.mapClickHandle_ = GEvent.addListener(me.map_, 'click', me.onMapClick_);
me.txtInfo_.style.display = 'block';
me.btnReset_.style.display = 'inline';
me.btnEnable_.src = me.ENABLE_BUTTON_IMAGE_;
me.btnEnable_.title = me.ENABLE_BUTTON_TITLE_;
me.updateDistance_();
} else {
GEvent.removeListener(me.mapClickHandle_);
me.txtInfo_.style.display = 'none';
me.btnReset_.style.display = 'none';
me.btnEnable_.src = me.DISABLE_BUTTON_IMAGE_;
me.btnEnable_.title = me.DISABLE_BUTTON_TITLE_;
}
}
/**
* 事件处理函数：当用户单击地图时，要在该位置添加一个标注
*/
GRulerControl.prototype.onMapClick_ = function(marker, point) {
var me = this.rulerControl_;
// 如果用户单击的是标注，不再这里处理
if (marker)
return;
// 创建标注，并添加到链表中
var newMarker = new GMarker(point, {draggable: true});
var pos = me.tail_.prev_;
newMarker.prev_ = pos;
newMarker.next_ = pos.next_;
pos.next_.prev_ = newMarker;
pos.next_ = newMarker;
// 为标注添加事件处理函数：拖拽标注时要更新连接线段和距离
GEvent.addListener(newMarker, 'dragend',
function() {
me.map_.closeInfoWindow();
me.updateSegments_(newMarker);
me.updateDistance_();
}
);
// 为标注添加事件处理函数：单击标注时要显示气泡窗口
GEvent.addListener(newMarker, 'click',
function() {
newMarker.openInfoWindow(me.createInfoWindow_(newMarker));
}
);
// 将创建的标注添加到地图中
me.map_.addOverlay(newMarker);
if (newMarker.prev_ != me.head_) {
// 如果这不是第一个标注，则创建连接到上一个标注的线段，并显示在地图中
var segment = [newMarker.prev_.getPoint(), point];
newMarker.segPrev_ = new GPolyline(segment);
newMarker.prev_.segNext_ = newMarker.segPrev_;
me.map_.addOverlay(newMarker.segPrev_);
// 更新距离显示
me.updateDistance_();
}
}
/**
* 统计总距离，并显示在网页中
*/
GRulerControl.prototype.updateDistance_ = function() {
var me = this;
var len = me.getDistance();
// 结果显示在网页中
me.txtInfo_.innerHTML = me.formatDistance_(len);
}
/**
* 遍历链表，统计总距离
*/
GRulerControl.prototype.getDistance = function() {
var me = this;
var len = 0;
// 周游链表，累计相邻两个标注间的距离
for (var m = me.head_; m != me.tail_; m = m.next_) {
if (m.prev_ && m.prev_.getPoint)
len += m.prev_.getPoint().distanceFrom(m.getPoint());
}
return len;
}
/**
* 清除所有标注，初始化链表
*/
GRulerControl.prototype.reset = function() {
var me = this;
for (var m = me.head_.next_; m != me.tail_; m = m.next_) {
me.map_.removeOverlay(m);
if (m.segNext_)
me.map_.removeOverlay(m.segNext_);
}
me.head_ = new Object();
me.tail_ = new Object();
me.head_.next_ = me.tail_;
me.tail_.prev_ = me.head_;
me.updateDistance_();
}
/**
* 事件处理函数：当用户拖拽标注、标注坐标改变时被调用，这里要更新与该标注连接的线段
* @param {GMarker} marker 被拖拽的标注
*/
GRulerControl.prototype.updateSegments_ = function(marker) {
var me = this;
var segment;
// 更新连接前驱的线段
if (marker.segPrev_ && marker.prev_.getPoint) {
// 从地图上删除旧的线段
me.map_.removeOverlay(marker.segPrev_);
// 根据标注的当前坐标构造新的线段，并更新链表结点的相关字段
segment = [marker.prev_.getPoint(), marker.getPoint()];
marker.segPrev_ = new GPolyline(segment);
marker.prev_.segNext_ = marker.segPrev_;
// 将新线段添加到地图中
me.map_.addOverlay(marker.segPrev_);
}
// 更新连接后继的线段，与上类似
if (marker.segNext_ && marker.next_.getPoint) {
me.map_.removeOverlay(marker.segNext_);
segment = [marker.getPoint(), marker.next_.getPoint()];
marker.segNext_ = new GPolyline(segment);
marker.next_.segPrev_ = marker.segNext_;
me.map_.addOverlay(marker.segNext_);
}
}
/**
* 为气泡提示窗口创建 DOM
对象，包括标注的坐标和“删除”按钮
* @param {GMarker} marker 对应的标注
*/
GRulerControl.prototype.createInfoWindow_ = function(marker) {
var me = this;
// 为气泡提示窗口创建动态 DOM
对象，这里我们用 DIV
标签
var div = document.createElement('div');
div.style.fontSize = '10.5pt';
div.style.w
idth = '250px';
div.appendChild(
document.createTextNode(me.formatLatLng_(marker.getPoint())));
var hr = document.createElement('hr');
hr.style.border = 'sol
id 1px #cccccc';
div.appendChild(hr);
// 创建“删除”按钮
var lnk = document.createElement('div');
lnk.innerHTML = me.DELETE_BUTTON_TITLE_;
lnk.style.color = '#0000cc';
lnk.style.cursor = 'pointer';
lnk.style.textDecoration = 'underline';
// 为“删除”按钮添加事件处理：调用 removePoint() 并重新计算距离
lnk.onclick =
function() {
me.map_.closeInfoWindow();
me.removePoint_(marker);
me.updateDistance_();
};
div.appendChild(lnk);
// 当用户关闭气泡时 Google Map API 会自动释放该
对象
return div;
}
/**
* 事件处理函数：当用户选择删除标注时被调用，这里要删除与该标注连接的线段
* @param {GMarker} marker 要删除的标注
*/
GRulerControl.prototype.removePoint_ = function(marker) {
var me = this;
// 先从地图上删除该标注
me.map_.removeOverlay(marker);
// 对于中间结点，还要把它的前驱和后继用线段连接起来
if (marker.prev_.getPoint && marker.next_.getPoint) {
var segment = [marker.prev_.getPoint(), marker.next_.getPoint()];
var polyline = new GPolyline(segment);
marker.prev_.segNext_ = polyline;
marker.next_.segPrev_ = polyline;
me.map_.addOverlay(polyline);
}
marker.prev_.next_ = marker.next_;
marker.next_.prev_ = marker.prev_;
if (marker.segPrev_)
me.map_.removeOverlay(marker.segPrev_);
if (marker.segNext_)
me.map_.removeOverlay(marker.segNext_);
}
</script>
<script type="text/
javascript">
function load(){
//检查浏览器的兼容性
if(GBrowserIsCompatible()){
//加载地图
map=new GMap2(document.getElementBy
Id("map_canvas"));
//设置地图的中心坐标
var center=new GLatLng(24.49933,118.13800);
map.setCenter(center,12);
//设置地图的缩放工具
map.setUIToDefault();
//添加缩略图
map.addControl(new GOverviewMapControl());
//激活地图的双击放大功能和支持滑轮缩放
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
//给地图添加右键菜单
createContextMenu(map);
//位于左上角
var topLeft=new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(0,0));
//添加地址导航控件
map.addControl(new GNavLabelControl(),topLeft);
//添加自定义的控件
map.addControl(new GRulerControl());
//定义一个框选缩放控件样式
var styleOpts={};
//定义框选控件的参数
var otherOpts={};
//设置按钮的名称
otherOpts.buttonHTML='框选缩放';
//设置点击后的名称
otherOpts.buttonZoomingHTML='请在地图上拉一个框';
//支持连续框选缩放
otherOpts.stickyZoomEnabled=true;
//设置拉框清除的时间间隔
otherOpts.overlayRemoveTime=60;
//拉框时地图的透明度，取
值从0~1
styleOpts.opacity=0;
//支持右键啦框缩小地图
otherOpts.rightMouseZoomOutEnabled=true;
var zcontrol=new DragZoomControl(styleOpts,otherOpts,{});
//位于左下角
var bottomLeft=new GControlPosition(G_ANCHOR_BOTTOM_LEFT,new GSize(0,0));
//添加自定义的控件
map.addControl(zcontrol,bottomLeft);
//初始化GClientGeocoder
对象
GoogleGeocoder=new GClientGeocoder();
var icon=new GIcon();
html='<div>这是什么</div>';
icon.image="http://labs.google.com/r
idefinder/images/mm_20_red.png";
icon.iconSize=new GSize(21,29);
var marker=createMarker(point,icon,html);
var point=marker.getPoint(112.429714,39.934522);
map.addOverlay(marker);
geocoder=new GClientGeocoder();
var marker=new GMarker(center,{draggable:true});
map.addOverlay(marker);
document.getElementBy
Id("lat").innerHTML=center.lat().toFixed(5);
document.getElementBy
Id("lng").innerHTML=center.lng().toFixed(5);
GEvent.addListener(marker,"dragend",function(){
var point=marker.getPoint();
map.panTo(point);
document.getElementBy
Id("lat").innerHTML=point.lat().toFixed(5);
document.getElementBy
Id("lng").innerHTML=point.lng().toFixed(5);
});
GEvent.addListener(map,"moveend",function(){
map.clearOverlays();
var center=map.getCenter();
var marker=new GMarker(center,{draggable:true});
map.addOverlay(marker);
document.getElementBy
Id("lat").innerHTML=center.lat().toFixed(5);
document.getElementBy
Id("lng").innerHTML=center.lng().toFixed(5);
GEvent.addListener(marker,"dragend",function(){
var point=marker.getPoint();
map.panTo(point);
document.getElementBy
Id("lat").innerHTML=point.lat().toFixed(5);
document.getElementBy
Id("lng").innerHTML=point.lng().toFixed(5);
});
});
}
else
alert("error");
}
//创建右键菜单，参数为地图
对象，即为该地图添加右键菜单功能
function createContextMenu(map){
//右键菜单其实是一个DIV
contextmenu=document.createElement("div");
//初始创建时右键菜单不可见
contextmenu.style.visibility="h
idden";
//设置右键菜单的背景色及宽度
contextmenu.style.background="#ffffff";
contextmenu.style.border="1px sol
id #8888FF";
//
获取地图
对象的容器，并将菜单的DIV添加上去，但此时的菜单中不可见的
map.getContainer().appendChild(contextmenu);
//为地图的右键添加事件侦听。当右键点击地图时，在地图右键点击的地方把菜单显示出来
GEvent.addListener(map,"singlerightclick",function(pixel,title){
//
获取右键点击时的坐标位置（指像素）
clickedPixel=pixel;
var x=pixel.x;
var y=pixel.y;
//如果右键点击达到了屏幕的边界，调整菜单的位置
if(x>map.getSize().w
idth-120)
{
x=map.getSize().w
idth-120
}
if(y>map.getSize().height-100)
{
y=map.getSize().height-100
}
//实例化一个地图的位置控件
var pos=new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(x,y));
//把菜单DIV作为
对象传递给地图位置控件
pos.apply(contextmenu);
//把菜单设置为可见
contextmenu.style.visibility="visible";
});
//为地图添加click事件侦听器，当单击地图时，把菜单隐藏
GEvent.addListener(map,"click",function(){
contextmenu.style.visiblity="h
idden";
});
}
function createMarker(point,baseIcon,html){
var icon=new GIcon(baseIcon);
var marker=new GMarker(point,icon);
GEvent.addListener(marker,"click",function(){
marker.openInfoWindowHtml(html);
});
return marker;
}
//初始化地图
window.onload=load;
//卸载地图
window.onunload=GUnload;
</script>
</head>
<body onload="load()" onunload="GUnload()" topmargin="0" leftmargin="0">
<b><span style="font-size:15pt">
厦门旅游服务系统
</span></b>
<div
id="intro" style="w
idth:700px;"></div>
查询地址：<input type="text"
id="txtAddress" name="txtAddress" size="40" />
<input type="button" value="查询" onclick="showLocation();"/>
<table>
<tr>
<td>
<p>
<b><span style="font-size:12pt">
提示：单击您的当前位置和每个便民设施标注点通过测量距离选择您要的路线
</span></b></p>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div
id="map_canvas" style="w
idth:800px;height:480px;float:left;">
</div>
</td>
<td>
<div
id="divOutput" style="float:left;"></div>
<div
id="msg"></div>
</td>
</tr>
<table>
<tr><td>
<p>
<b><span style="font-size:9pt">
用鼠标拖拉地图中心的红色气球标记就可以显示所在位置的经纬度坐标数据
</span></b>
</p>
</td>
<td w
idth="50">
<p align="right">
<b span style="font-size:9pt">纬度：</b>
</p>
</td>
<td
id="lat"></td>
<td w
idth="50">
<p align="right">
<b span style="font-size:9pt">经度：</b>
</p>
</td>
<td
id="lng"></td>
</tr>
</table>
</table>
</body>
</html>
本文详细介绍了JavaScript的基础知识，包括其基于对象、事件驱动和解释性的特性，以及ECMAScript、DOM和BOM的组成。讲解了JavaScript的三种引入方式，并对比了各自的优缺点。此外，还探讨了常用的console.log()和alert()函数，以及变量的声明与命名规则。在交互方面，文章阐述了如何通过ID、类名和标签名获取HTML元素，以及各种鼠标事件的使用方法。
扫一扫
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
