该实例收集了一些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&v=2&sensor=true_or_false
&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!=""&¤tZoom!=""){
//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>
分享到：
相关推荐
JavaScript谷歌API地图源码是用于在网页中集成和操作谷歌地图的一种编程接口。这个源码集成了地图的基本功能，如地图的缩放、平移，以及添加标注和气泡提示框，这些都是创建交互式地图应用的关键元素。下面将详细...
通过这份“google地图API手册和实例源码”，开发者不仅可以学习到Google Maps API的基本用法，还能通过实例代码了解如何在实际项目中应用这些功能。源码分析和实践是掌握API的关键，可以帮助开发者快速提升技能，...
在本文中，我们将深入探讨"Google地图GIS API应用实例"，这是基于Google Map平台的地理信息系统（GIS）开发的一个典型案例。对于初学者来说，这是一个很好的起点，能够帮助他们理解和掌握如何利用Google Maps API来...
总的来说，"GOOGLEAPI开发详解-Googleearth实例代码"将引导你进入一个结合了2D地图和3D地球的广阔天地，让你能够利用谷歌的强大工具开发出富有创新性的地理应用。无论是为了工作还是个人兴趣，深入理解和掌握这些API...
总的来说，"基于Google Map API的简单地图"项目涵盖了定位用户、地图操作和标记地点等基本功能，通过学习和实践，开发者可以构建出更加丰富和交互性强的地图应用。Google Map API的强大和灵活性使其成为开发地图应用...
本教程旨在帮助初学者快速掌握Google地图API的核心概念和基本操作，适合对地理信息系统（GIS）和Web开发感兴趣的读者。 #### 二、“Hello, World”示例解析：Google地图API入门 最直观的学习方式是从一个简单的...
了解如何使用`GMap2`对象进行地图的基本操作至关重要，例如设置地图中心、调整缩放等级等。此外，还需要熟悉如何加载地图API库，并确保浏览器兼容性。 ##### 1.2 Google地图的“Hello,World” 为了更好地理解如何...
这些都是Android应用开发中与Google Maps API交互的基本操作。 总之，"Android Google 地图实例"是一个实用的资源，它通过清晰的代码演示了如何在Android应用中有效地利用Google Maps API。通过学习和实践这个实例...
以上就是谷歌地图API的基本概念和使用方式。开发者可以通过组合这些基本元素，构建复杂的应用，例如显示多个标记，搜索地点，实现路线规划，甚至创建自定义图层。在实际开发中，还需要了解API的其他功能，如地理编码...
【Google地图API教程v2】主要讲解了如何在应用程序中集成和操作Google地图的基本知识，尤其是针对GMap2对象的使用。以下是对其中关键知识点的详细说明： 1. **地图基础知识**：Google地图API的核心是地图对象，它...
首先，我们要了解Google Maps API的基本概念。它是一个允许开发者在自己的网站或应用程序中嵌入Google Maps功能的接口。通过API，我们可以获取地图图像、实现地理位置搜索、导航路线规划以及地理编码等功能。对于...
3. 初始化地图：设置地图的基本参数，如中心点、缩放级别等，然后在页面上创建地图实例。 4. 添加功能：利用API提供的方法添加标记、绘制形状、设置图层、实现交互等。 5. 处理用户输入：响应用户的点击、拖拽等操作...
谷歌地图API V3是Google为开发者提供的一种强大的工具，用于在网页上集成和操作地图。在API中，`ExtDraggableObject`是一个自定义扩展类，它允许用户将地图上的对象（如标记、覆盖物等）进行拖放操作，极大地增强了...
开发者需要在谷歌API控制台注册项目并获取API密钥，然后在应用中正确配置以使用API。 ### 10. 移动设备兼容 API 3.16.2支持WebGL，使得地图在移动设备上也有良好的表现，适应各种屏幕尺寸和触摸操作。 总结，谷歌...
通过这7个实例，你将全面了解电子地图的基本概念、API的使用以及地理信息系统（GIS）的一些核心概念。每个实例都是一次实践机会，通过动手操作，你将逐步建立起对电子地图编程的信心和技能。无论是为个人项目还是...
《图书Google Maps API开发大全》是一本深入探讨Google Maps API技术的专业书籍，旨在帮助开发者全面理解和熟练运用这一强大的地图服务接口。源码文件名为"code"，包含了书中各个章节的示例代码，使得读者能够通过...
总的来说，"Google Maps 二次开发实例"是一个综合性的项目，涵盖了地图API的使用、数据库交互、前端UI设计以及搜索功能的实现等多个方面。对于想要深入学习Google Maps开发的IT从业者来说，这是一个极好的学习资源。...
Google API是谷歌提供的一系列接口，允许开发者访问和利用谷歌的各种服务，如地图、搜索、身份验证等。 在这个项目中，"iTracks"可能是一个跟踪位置、路线或者运动轨迹的应用功能。注释的存在是为了帮助开发者理解...
【Google Maps API】是Google提供的一种强大的开发工具，允许开发者在网页中集成地图功能，...通过以上内容，我们可以全面了解Google Maps API的基本操作和高级特性，为开发基于Google Maps的应用提供了坚实的基础。