`

googleAPI的地图基本操作实例

    博客分类:
  • gis
阅读更多

该实例收集了一些google地图api的基本功能,如放大、缩小、全图、地图漫游、影像图切换、上一视图和下一视图和地图标注、点击标注弹出提示框等功能.下面填出该实例代码供大家分享和学习。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false
    &amp;key=ABQIAAAAPGq6RvAR61XN1TBCsKws2RR1QlIE-hpt_fSbcOwWbG618GyNHBR3-AwGR8JO3QL2pN0heescfQHWcg"
    type="text/javascript">
</script>
<script type="text/javascript">
var map;
var currentMapXY;
var previMapXy="";  //上一个视图
var currentZoom;
var priviZoom="";
 function initialize() {
  if (GBrowserIsCompatible()) { 
  	
	 
	  map = new GMap2(document.getElementById("map_canvas"));  //类的对象在页面上定义单个地图 
	
	 //设置地图的类型为卫图  G_NORMAL_MAP- 默认视图 G_SATELLITE_MAP - 显示 Google 地球卫星图像 G_HYBRID_MAP - 混合显示普通视图和卫星视 G_DEFAULT_MAP_TYPES 这三个类型的数组,用于迭代处理 
	//  map.setMapType(G_SATELLITE_MAP); 
	  map.setCenter(new GLatLng(39.917, 116.397), 14);  //setCenter() 方法需要 GLatLng 经纬度坐标和缩放级别  深圳:22.70, 114.00
	 	currentMapXY=map.getCenter();
		currentZoom=map.getZoom();
	
	  map.enableDoubleClickZoom() ;  //启用双击缩放地图	  
	   map.enableDragging();  //地图拖动
	
	  var bounds = map.getBounds();  //获取得图的东南西北的坐标  了解当前视窗的尺寸	
	  var southWest = bounds.getSouthWest();   //西南  lng():经度   lat() 纬度
	  var northEast = bounds.getNorthEast();	//东北
	  var lngSpan = northEast.lng() - southWest.lng();
	  var latSpan = northEast.lat() - southWest.lat();   //纬度差
	  for (var i = 0; i < 4; i++) {   //得到随机的4个点
		var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
		southWest.lng() + lngSpan * Math.random());  //获得点的坐标
		map.addOverlay(new NewGMarker(point));			//加入点标记
	  }
	  
	 var Overmap = new GOverviewMapControl(new GSize(162,150));     //添加鹰眼图,并设置鹰眼图的大小
   	 map.addControl(Overmap); 
     //  ov_ctrl = Overmap.getOverviewMap(); 
     //  setTimeout("ov_ctrl.setMapType(G_SATELLITE_MAP);",14);
	 map.addControl(new GSmallMapControl());   //地图----替换影像图转换
    map.addControl(new GMapTypeControl());		//卫星
	//alert(g_myMap)
	
	GEvent.addListener(map, "moveend", function() {
		//alert("地图有变化");
		getMapView();
	});
  }
} 

function getMapView(){
	var _map,_zoom;
	if(currentMapXY!=""&&currentZoom!=""){
		//map.getCenter()+"---"+map.getZoom()
		_map=currentMapXY;
		_zoom=currentZoom;
		currentMapXY=map.getCenter();
		currentZoom=map.getZoom();
		if(previMapXy==""&&priviZoom==""){
			previMapXy=_map;
			priviZoom=_zoom;
		}else{
			previMapXy+="|"+_map;
			priviZoom+="|"+_zoom;
		}
		
	}
	//alert("**上一个**"+previMapXy+"----"+priviZoom);
	
}
function  NewGMarker(point){  //弹出一个窗口
	 var marker = new GMarker(point);
	 GEvent.addListener(marker, "click", function() {
	 	map.openInfoWindow(point, document.createTextNode("弹,弹,谭,我是弹出来的哦")); // 要创建信息窗口
	 })
	 return marker;	 
}
function imageLayerSwitch(){  //影像图转换	
	if(map.getCurrentMapType()==G_SATELLITE_MAP){	
		map.setMapType(G_NORMAL_MAP); 
	}else{
		map.setMapType(G_SATELLITE_MAP)
	}
}

function zoomIn(){  //放大
	map.zoomIn();
}
function zoomOut(){			//缩小
	map.zoomOut();
}
function zoomFullExtent(){	
	 map.setCenter(new GLatLng(39.917, 116.397), 14);
}

function  mapPan(){			//地图漫游
		 map.enableDragging() ;  //允许地图拖动
}
function next(){   //下一视图--有问题
try{
	previMapXy=previMapXy.toString();	
	var mapXyArrTemp=previMapXy.split("|");
	var priviZoomArr=priviZoom.split("|");
	for(var i=mapXyArrTemp.length-1;i<mapXyArrTemp.length;i--){
		var mapXyArr=mapXyArrTemp[i].substr(1,mapXyArrTemp[i].length-2);		
		mapXyArr=mapXyArr.split(",");
		var x=parseFloat(mapXyArr[0]);
		var y=parseFloat(mapXyArr[1]);
		alert(x+"^^^"+y+"---"+priviZoomArr[i])
		map.setCenter(new GLatLng(x,y), parseInt(priviZoomArr[i]));
	}
}catch(err){}
}
function previous(){  //上一视图---有问题
try{
	previMapXy=previMapXy.toString();	
	var mapXyArrTemp=previMapXy.split("|");
	var priviZoomArr=priviZoom.split("|");
	for(var i=mapXyArrTemp.length-1;i<mapXyArrTemp.length;i--){
		var mapXyArr=mapXyArrTemp[i].substr(1,mapXyArrTemp[i].length-2);		
		mapXyArr=mapXyArr.split(",");
		var x=parseFloat(mapXyArr[0]);
		var y=parseFloat(mapXyArr[1]);
		alert(x+"^^^"+y+"---"+priviZoomArr[i])
		map.setCenter(new GLatLng(x,y), parseInt(priviZoomArr[i]));
	}
}catch(err){}
	

}
 </script>
 <body onload="initialize()" > 
 	<div style=" position: absolute; top:30PX; left:30PX ;height:35px ; float:right">
	<table border="1"cellpadding="0" cellspacing="0" bordercolor="#0000FF">
	<tr>
		<td><img src="images/toolbar/imageLayerSwitchImg.gif"  title="影像图切换" onclick=" imageLayerSwitch(); return false;" /></td>
		<td><img src="images/toolbar/zoomIn.gif"  title="放大" onclick=" zoomIn(); return false;" /></td>	
		<td><img src="images/toolbar/zoomOut.gif"  title="缩小" onclick=" zoomOut(); return false;" /></td>
		<td><img src="images/toolbar/zoomFullExtent.gif"  title="全图" onclick=" zoomFullExtent(); return false;" /></td>
		<td><img src="images/toolbar/mapPan.gif"  title="地图漫游" onclick="mapPan(); return false;" /></td>		
		<td><img src="images/toolbar/previous.gif"  title="上一视图" onclick="previous(); return false;" /></td>
		<td><img src="images/toolbar/next.gif"  title="下一视图" onclick="next(); return false;" /></td>
	</tr>	
	</table>	
 </div>	
 	<div id="map_canvas" style="position: absolute; width: 500px; height: 400px; left: 13px; top: 70px;">	</div> 
 </body> 
 </html>

 

分享到:
评论

相关推荐

    js GOOGLE API地图源码

    JavaScript谷歌API地图源码是用于在网页中集成和操作谷歌地图的一种编程接口。这个源码集成了地图的基本功能,如地图的缩放、平移,以及添加标注和气泡提示框,这些都是创建交互式地图应用的关键元素。下面将详细...

    google地图API手册和实例源码

    通过这份“google地图API手册和实例源码”,开发者不仅可以学习到Google Maps API的基本用法,还能通过实例代码了解如何在实际项目中应用这些功能。源码分析和实践是掌握API的关键,可以帮助开发者快速提升技能,...

    Google地图GISAPI应用实例

    在本文中,我们将深入探讨"Google地图GIS API应用实例",这是基于Google Map平台的地理信息系统(GIS)开发的一个典型案例。对于初学者来说,这是一个很好的起点,能够帮助他们理解和掌握如何利用Google Maps API来...

    GOOGLEAPI开发详解-Googleearth实例代码

    总的来说,"GOOGLEAPI开发详解-Googleearth实例代码"将引导你进入一个结合了2D地图和3D地球的广阔天地,让你能够利用谷歌的强大工具开发出富有创新性的地理应用。无论是为了工作还是个人兴趣,深入理解和掌握这些API...

    基于Google Map API的简单地图

    总的来说,"基于Google Map API的简单地图"项目涵盖了定位用户、地图操作和标记地点等基本功能,通过学习和实践,开发者可以构建出更加丰富和交互性强的地图应用。Google Map API的强大和灵活性使其成为开发地图应用...

    Google地图API教程

    本教程旨在帮助初学者快速掌握Google地图API的核心概念和基本操作,适合对地理信息系统(GIS)和Web开发感兴趣的读者。 #### 二、“Hello, World”示例解析:Google地图API入门 最直观的学习方式是从一个简单的...

    Google地图API

    了解如何使用`GMap2`对象进行地图的基本操作至关重要,例如设置地图中心、调整缩放等级等。此外,还需要熟悉如何加载地图API库,并确保浏览器兼容性。 ##### 1.2 Google地图的“Hello,World” 为了更好地理解如何...

    android google 地图实例

    这些都是Android应用开发中与Google Maps API交互的基本操作。 总之,"Android Google 地图实例"是一个实用的资源,它通过清晰的代码演示了如何在Android应用中有效地利用Google Maps API。通过学习和实践这个实例...

    我收集的谷歌地图API实例

    以上就是谷歌地图API的基本概念和使用方式。开发者可以通过组合这些基本元素,构建复杂的应用,例如显示多个标记,搜索地点,实现路线规划,甚至创建自定义图层。在实际开发中,还需要了解API的其他功能,如地理编码...

    Google地图API教程v2

    【Google地图API教程v2】主要讲解了如何在应用程序中集成和操作Google地图的基本知识,尤其是针对GMap2对象的使用。以下是对其中关键知识点的详细说明: 1. **地图基础知识**:Google地图API的核心是地图对象,它...

    Google Maps API之综合实例——奥运会信息服务系统

    首先,我们要了解Google Maps API的基本概念。它是一个允许开发者在自己的网站或应用程序中嵌入Google Maps功能的接口。通过API,我们可以获取地图图像、实现地理位置搜索、导航路线规划以及地理编码等功能。对于...

    google地图mapabc地图yahoo 在线地图api开发包OnlineMapProject.rar

    3. 初始化地图:设置地图的基本参数,如中心点、缩放级别等,然后在页面上创建地图实例。 4. 添加功能:利用API提供的方法添加标记、绘制形状、设置图层、实现交互等。 5. 处理用户输入:响应用户的点击、拖拽等操作...

    google map api v3 ExtDraggableObject

    谷歌地图API V3是Google为开发者提供的一种强大的工具,用于在网页上集成和操作地图。在API中,`ExtDraggableObject`是一个自定义扩展类,它允许用户将地图上的对象(如标记、覆盖物等)进行拖放操作,极大地增强了...

    谷歌离线API 3.16.2包含实例

    开发者需要在谷歌API控制台注册项目并获取API密钥,然后在应用中正确配置以使用API。 ### 10. 移动设备兼容 API 3.16.2支持WebGL,使得地图在移动设备上也有良好的表现,适应各种屏幕尺寸和触摸操作。 总结,谷歌...

    电子地图入门7实例

    通过这7个实例,你将全面了解电子地图的基本概念、API的使用以及地理信息系统(GIS)的一些核心概念。每个实例都是一次实践机会,通过动手操作,你将逐步建立起对电子地图编程的信心和技能。无论是为个人项目还是...

    图书Google Maps API开发大全的各章源码

    《图书Google Maps API开发大全》是一本深入探讨Google Maps API技术的专业书籍,旨在帮助开发者全面理解和熟练运用这一强大的地图服务接口。源码文件名为"code",包含了书中各个章节的示例代码,使得读者能够通过...

    Google Maps 二次开发实例

    总的来说,"Google Maps 二次开发实例"是一个综合性的项目,涵盖了地图API的使用、数据库交互、前端UI设计以及搜索功能的实现等多个方面。对于想要深入学习Google Maps开发的IT从业者来说,这是一个极好的学习资源。...

    一个Google Api 安卓小程序源码.rar

    Google API是谷歌提供的一系列接口,允许开发者访问和利用谷歌的各种服务,如地图、搜索、身份验证等。 在这个项目中,"iTracks"可能是一个跟踪位置、路线或者运动轨迹的应用功能。注释的存在是为了帮助开发者理解...

    Google_Map_API谷歌地图.ppt

    【Google Maps API】是Google提供的一种强大的开发工具,允许开发者在网页中集成地图功能,...通过以上内容,我们可以全面了解Google Maps API的基本操作和高级特性,为开发基于Google Maps的应用提供了坚实的基础。

Global site tag (gtag.js) - Google Analytics