<!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 onload='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>
分享到：
发表评论
相关推荐
Google Maps JavaScript API V3 是一个强大的工具，允许开发者在网页上集成谷歌地图的功能，提供丰富的交互式地图体验。这个API版本带来了许多改进和新特性，使得开发更加高效和灵活。以下是对主要知识点的详细说明...
谷歌地图API V3是Google为开发者提供的一种强大的工具，用于在网页上集成和操作地图。在API中，`ExtDraggableObject`是一个自定义扩展类，它允许用户将地图上的对象（如标记、覆盖物等）进行拖放操作，极大地增强了...
在日常工作场景中，为了提高工作效率，开发一个简单的Chrome扩展变得非常实用。此篇文档介绍了一个基于Chrome扩展V3版标准的简易实例。该实例旨在帮助用户在浏览特定业务系统时，能够快速识别出符合特定规则的条目，...
这个案例是前端开发者掌握Chrome插件开发的一个实用示例，它涉及到网页数据抓取、数据处理以及与用户交互的多个层面。 首先，我们需要了解**Chrome扩展插件的基本结构**。一个典型的Chrome插件由以下几个部分组成：...
而谷歌地图实用库v3（google-maps-utility-library-v3）则进一步增强了这个API的功能，为开发者提供了更多的便利。本篇将深入探讨这个库的特性和使用方法。 首先，我们要理解google-maps-utility-library-v3是一个...
随着技术的发展，Google还不断推出新的API和服务，如Google Maps JavaScript API v3，为开发者提供了更多可能。 总之，《Google API开发详解：Google Maps与Google Earth双剑合璧(第2版)》是一本全面的指南，覆盖了...
总之，"google-maps-marker-with-label-v3"是一个非常实用的JavaScript库，它为Google Maps API V3增加了标记标签功能，使地图信息的展示更加直观和丰富。对于那些需要在地图上清晰地标注特定位置的应用来说，这是一...
根据提供的代码示例和上下文信息，我们可以了解到作者分享了一个简单的JavaScript函数，用于根据不同的域名自动加载相应的Google Maps API密钥。这在实际应用中是非常实用的功能，因为它可以帮助开发者轻松地管理多...
【标题】"google地图jquery插件rar"是一个与JavaScript库jQuery相关的资源，它提供了一种简单的方法来在网站上集成谷歌地图API V3。这个插件名为Maplace.js，主要功能是帮助开发者轻松地在地图上添加标记和控制菜单...
【Google日历S60手机同步软件】 在移动设备领域，尤其是智能手机中，与云端服务的集成变得越来越...通过GoogaSync.v2.20.Symbian.OS.9.x.S60.v3.v5.Unsigned.CHS_OPDA.SIS这个文件，用户可以下载并体验这一同步服务。
Chrome插件是Google Chrome浏览器的一种扩展程序，它们可以增加或修改浏览器的功能，以满足用户的个性化需求。本案例中，我们关注的是一个简单的Chrome插件，它的功能是实现自动登录。这个插件对于经常需要访问多个...
ExoPlayer 提供了视频预览的功能，可以在播放器界面外的一个小窗口显示视频内容，这在实现画中画或者悬浮窗播放时非常实用。开发者可以通过SurfaceView或者TextureView来实现窗口预览，并自定义其大小和位置。 4. ...
这个库提供了一种简单的方法来创建和管理翻译请求，通过与Google Translate API进行交互。开发者可以使用这个库来翻译字符串、段落甚至整个文档，支持多种语言之间的转换。例如，你可以通过几行代码就实现从中文到...
：使用此 Snippet 轻松绘制简单的 Google 地图。 ：这是一个实用程序片段，用于对提交的表单进行地理编码或向页面上的其他元素添加地理编码功能。 ：这将自动查找包含位置信息（地址、城市、州等）的页面的纬度和...
在谷歌浏览器中，插件的安装通常很简单。首先，用户需要下载这个名为"浏览器自定时或自动刷新的插件.rar"的压缩文件，并将其解压。解压后，会得到一个包含插件文件的文件夹。对于谷歌浏览器，用户可以直接将这个...
【AutoIt教程】AutoIt是一种轻量级的脚本语言，专用于自动...通过不断的练习和编写脚本，你将逐渐熟练掌握AutoIt的使用，实现各种自动化任务，无论是简单的文件操作，还是复杂的系统管理，AutoIt都能成为你得力的工具。
3. 《深入浅出_Google_Android(PDF格式高清中文版)》：这本书深入探讨了Google Android平台的各个方面，包括最新的技术趋势和最佳实践。它不仅讲解了基础概念，还涵盖了高级主题，如性能优化、安全性、多设备兼容性...
开发者可以通过简单的API调用，实现地图的动态加载，根据用户的地理位置或特定区域来加载相应级别的地图数据。这在移动设备上的应用尤为实用，能够有效减少数据传输量，提升用户体验。 再者，插件的离线地图功能...
这意味着它可能具有直观的用户界面，操作流程简单，且成功率较高。 标签“iphone”，“FRPFILE”，“iCloudB”，“工具”进一步强调了这个工具主要处理的设备类型（iPhone）以及其核心功能（绕过FRP和iCloud）。...
Tun2追求的是简单与实用。它不同于一般的CMS，繁杂并令人无从下手。有些CMS就连接触多年网站制作的Tun2都需要花上很多的时间去了解并去熟悉它的操作，更别谈如何令客户满意自己做的网站了。正是因为这些原因，Tun2...