<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<!--google 拉框控件-->
<script type="text/javascript" src="keydragzoom.js"></script>
</HEAD>
<BODY οnlοad='init()'>
<div id='gmap' style="width: 800px; height: 600px">
</div>
<script>
var latlng=[[31.840650970233095,117.19356549365238],
[31.83525511970765,117.18498242480473],
[31.84524448619277,117.18000424487309],
[31.849546142939282,117.19356549365238]];
var bounds=[[31.845973594676078,117.18026173693852],
[31.83897391535159,117.16944707019047]]
function log(str){
document.getElementById('a').innerHTML=document.getElementById('a').innerHTML+"</br>"+str;
}
function mapControl(){
this.control;
this.infoWindwo;
this.geoCoder;
this.points=[]; //标点集合对象
this.polyLine=null; //轨迹线对象
this.polyGon=null; //多边形
this.rectangle=null; //矩形
this.circle=null; //圆形
this.overlayView=null; //气泡框
this.gEvent=function (){return google.maps.event;}; //google事件对象
var temp=this;
this.mapStyle=new function (){
//将地图的中心设置为指定的地理点 可以使用 0(最低缩放级别,在地图上可以看到整个世界)到 19(最高缩放级别,可以看到独立建筑物)之间的缩放级别
//ROADMAP-默认视图 SATELLITE-显示Google地球卫星图像 HYBRID-混合显示普通视图和卫星视图 TERRAIN-地形图
this.hybrid=google.maps.MapTypeId.HYBRID; //混合
this.roadmap=google.maps.MapTypeId.ROADMAP; //路线图
this.satellite=google.maps.MapTypeId.SATELLITE; //卫星
this.terrain=google.maps.MapTypeId.TERRAIN; //地形
}
this.mapMenuStyle=new function (){
this.defaultMenu =google.maps.MapTypeControlStyle.DEFAULT; //默认样式 HORIZONTAL_BAR
this.dropdownMenu =google.maps.MapTypeControlStyle.DROPDOWN_MENU; //位置
this.horizontalBar =google.maps.MapTypeControlStyle.HORIZONTAL_BAR; //风格
}
this.geocoderStatus=new function (){
//google.maps.GeocoderStatus;
this.error= google.maps.GeocoderStatus.ERROR; //There was a problem contacting the Google servers.
this.invalidRequest= google.maps.GeocoderStatus.INVALID_REQUEST; //This GeocoderRequest was invalid.
this.ok= google.maps.GeocoderStatus.OK; //The response contains a valid GeocoderResponse.
this.overQueryLimit= google.maps.GeocoderStatus.OVER_QUERY_LIMIT; //The webpage has gone over the requests limit in too short a period of time.
this.requestDenied= google.maps.GeocoderStatus.REQUEST_DENIED; //The webpage is not allowed to use the geocoder.
this.unknownError= google.maps.GeocoderStatus.UNKNOWN_ERROR; //A geocoding request could not be processed due to a server error. The request may succeed if you try again.
this.zeroResults= google.maps.GeocoderStatus.ZERO_RESULTS;
}
this.initialize=function () {
//google.maps.MapTypeControlStyle.DROPDOWN_MENU
var mapOptions = {
zoom: 14, //缩放级别
center: new google.maps.LatLng(31.838463501293745, 117.17588437182617),
mapTypeId: temp.mapStyle.terrain,
scaleControl: true, //比例尺
mapTypeControl: true,
mapTypeControlOptions: {style: temp.mapMenuStyle.dropdownMenu}
};
temp.control = new google.maps.Map(document.getElementById("gmap"),mapOptions);//编写 JavaScript 函数创建“map”对象
//按shift拉框
temp.control.enableKeyDragZoom({
key: "shift",
boxStyle: {
border: "4px dashed black",
backgroundColor: "transparent",
opacity: 1.0
},
veilStyle:{
backgroundColor: "red",
opacity: 0.35,
cursor: "crosshair"
}
});
//拉框返回事件
var dz = temp.control.getDragZoomObject();
//按下shift后的事件
//google.maps.event.addListener(dz, 'activate', function () {log('KeyDragZoom Activated');});
//shift弹起后的事件
//google.maps.event.addListener(dz, 'deactivate', function () {log('KeyDragZoom Deactivated');});
//google.maps.event.addListener(dz, 'dragstart', function (latlng) {log('KeyDragZoom Started: ' + latlng);});
//拉动时的经纬度
//google.maps.event.addListener(dz, 'drag', function (startPt, endPt) {log('KeyDragZoom Dragging: ' + startPt + endPt);});
//最后的经纬度
google.maps.event.addListener(dz, 'dragend', function (bnds) {
temp.createRectangle(bnds)
log('KeyDragZoom Ended: ' + bnds);
});
//点击地图创建点
google.maps.event.addListener(temp.control, 'click', function(event) {
temp.clearAllMapMarker();
//temp.getAddrsText(event.latLng)
temp.addPoint(event.latLng)
log(event.latLng.lat()+":"+event.latLng.lng());
});
temp.geoCoder=temp.getGeoCoder();
temp.infoWindwo=temp.getInfoWindow();
//画线
var xys1=[];
var xys2=[];
for(var i in latlng){
var xy= temp.createLatLng(latlng[i][0],latlng[i][1]);
xys1.push(xy);
xys2.push(xy)
}
//temp.createPolyLine(xys1);
xys2.push(xys2[0])
//temp.createPolyGon(xys2);
var xys3=[];
for (var i in bounds )
{
var xy= temp.createLatLng(latlng[i][0],latlng[i][1]);
xys3.push(xy)
}
//temp.createRectangle(temp.createLatLngBounds(xys3[0],xys3[1]))
temp.createCircle(xys3[0],1000);
}
//创建一个经纬度对象
this.createLatLng=function (lat,lng){
return new google.maps.LatLng(lat,lng);
}
//矩形大小对象
this.createLatLngBounds=function (lb,rt){
return new google.maps.LatLngBounds(rt,lb);
}
this.getPointOption=function (){
google.maps.MarkerOptions.call(this);
return this;
}
this.getLatLng=function (LatLng){
return new google.maps.LatLng(LatLng);
}
//创建默认标点
this.addPoint=function (latLng){
//var option =temp.getPointOption();
var markerLatLng = temp.getLatLng(latLng);
var point=new google.maps.Marker({
position: latLng,
map: temp.control
});
temp.points.push(point);
temp.control.setCenter(latLng);
temp.gEvent().addListener(point, "click", function(){
temp.animation(point);
temp.infoWindwo.open(temp.control,point);
});
}
//创建图片标点
this.addImagePoint=function (latLng){
//MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
}
//动画类
this.animation=function (marker){
//google.maps.Animation
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);//跳跃
}
}
//获取poi信息
this.getAddrsText=function (latLng){
temp.geoCoder.geocode({'location': latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var address;
address = results[0].formatted_address;
alert(address);
} else {
alert("Geocoder failed due to: " + status);
}
}
});
}
//画线
this.createPolyLine=function (latLngs){
temp.polyLine=new google.maps.Polyline({
path:latLngs,
map: temp.control
});
}
//画多边形
this.createPolyGon=function (latLngs){
//google.maps.Polygon;
temp.polyGon=new google.maps.Polygon({
path:latLngs,
map: temp.control
});
}
//画矩形
this.createRectangle=function (bound){
temp.rectangle=new google.maps.Rectangle({
bounds:bound,
map: temp.control
});
}
//画圆形
this.createCircle=function (latLng,radiu){
//google.maps.Circle
temp.circle=new google.maps.Circle({
map: temp.control,
center:latLng,
radius:radiu
});
}
//位置信息对象
this.getGeoCoder=function (){
return new google.maps.Geocoder();
}
//气泡框
this.createOverlayView=function (){
return new google.maps.OverlayView();
}
this.getInfoWindow=function (){
return new google.maps.InfoWindow(
{
size: new google.maps.Size(50,50),
map:temp.control,
content: "I'm here!"
//position: location
});
}
this.clearAllMapMarker=function (){
if(temp.points!=null && temp.points.length>0){
for(var i in temp.points){
temp.points[i].setMap(null);
};
temp.points=[];
};
//temp.infoWindwo.close();
}
}
function init(){
var a=new mapControl();
a.initialize();
}
</script>
<div id='a'>
</div>
</BODY>
</HTML>