<!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>
分享到：
发表评论
相关推荐
谷歌MAP_V3中文详解以及一个简单例子
实用代码 09 Inception-v3图片分类实用代码 09 Inception-v3图片分类实用代码 09 Inception-v3图片分类实用代码 09 Inception-v3图片分类实用代码 09 Inception-v3图片分类实用代码 09 Inception-v3图片分类实用代码...
可用于学习谷歌地图V3开发、或改造原谷歌V3项目(在线改离线)。 注：如vs下运行出错，就使用32位的sqlite运行库(bin目录下，手动改文件名) 再注:21年元旦起，谷歌服务器已全面被禁止访问，瓦片下载只能使用第三方工具
google map v3开发 V3地图搜素，V3地图标注，V3地图多点标注
运用google训练好的Inception-v3模型。将一个数据集上训练好的卷积神经网络模型快速迁 tensorflow迁移学习。运用google训练好的Inception-v3模型。将一个数据集上训练好的卷积神经网络模型快速迁 tensorflow迁移...
google v3 中文api
google map v3 实例。很有参考价值
GoogLeNet_v3 pytorch代码
Google Map API V3 离线开发文档（与Google官网一模一样，经编辑后离线也能照样查看，速度提升一个等级） PS:文件不能重命名，而原因想必你懂的！
googleMap的中文API,V3版本的,希望对于还在使用googleMap离线地图的你有所帮助
GoogleMaps API V3离线下载工具及使用.zip 主要对其地图的下载，及自我编制。 离线下完全可以使用，只需先进行地图的下载。 添加了控件，离线下可进行操作。。。
谷歌地图Google Map API中文开发文档 V3
中文版 API V3 Google_Maps_JavaScript_API_V3_教程 开发或者二次开发google 地图必须文档
对谷歌地图的应用开发，摸索了一个多月。编写了一个GoogleMaps ApiV3 Demo。内容包含了谷歌地图的基本功能，包括：收索地点、标注、填写标注信息、响应地图（点击、双击、经过）事件。一个比较复杂的难点是：点击...
谷歌升级后的地图demo，不包含密钥的开发。仅供借鉴
Google Maps Javascript API V3 Reference 适用于页面调用谷歌地图，弹出窗口等功能
OceanStor 5300 V3&5500; V3&5600; V3&5800; V3&6800; V3 存储系统 V300R006 错误码参考 01.pdf
全志V3S参考设计原理图，包括SDK、原理图和厂家资料
3、基于MVC（Model-View-Controller）的框架，这将减少JavaScript的下载量，并且简单易用。 4、自动开启默认的UI界面，提供默认的UI控件和方法，这可以让用户开发的界面自动更新为最新的格式，当然用户也可以...
GoogleMap中文教程，包含V3版本中文API，不过是通过翻译出来的，不过作为平时上不了网的脱机资源还是可以看看的。