google map api
google map 支持定制，可以实现很多功能,而api 中给的示例也很全面，用起来相当轻松。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps ***专版1.0</title>
<style type="text/css">
<!--
.text {
border: thin groove #999;
}
.text:hover {
border: thin groove #3F0;
}
#operate {
border: thin groove #CCC;
position: fixed;
height: 80%;
width: 17%;
top: 10px;
right: 1%;
}
#map {
position: absolute;
height: 95%;
width: 80%;
top: 10px;
left: 1%;
}
sub {
color: #F3F;
font-size: 12px;
}
-->
</style>
<script src="http://maps.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=en" type="text/javascript"></script>
<script type="text/ecmascript" src="js/jquery-1.4.1.js" language="javascript"></script>
<script type="text/javascript">
var mapArgs = {
map:null,
mapSize:12
}
$(document).ready(function(){
mapload();//加载地图
$(window).bind("unload",function(){GUnload();});//当关闭时调用，防内存泄漏
$("#buttonTagG").click(function(){goMap();});//添加根据坐标查找地理位置功能
$("#textTagLat").bind("keyup",
function() {//验证输入
if (isNaN($("#textTagLat").val())) {
$("#subLat").text("纬度只能是数字.");
$("#buttonTagG").attr("disabled", "disabled");
} else {
$("#subLat").text(" ");
$("#buttonTagG").removeAttr("disabled");
}
});
$("#textTagLng").bind("keyup",
function() {//验证输入
if (isNaN($("#textTagLng").val())) {
$("#subLng").text("经度只能是数字.");
$("#buttonTagG").attr("disabled", "disabled");
} else {
$("#subLng").text(" ");
$("#buttonTagG").removeAttr("disabled");
}
});
}
);
function mapload() {//加载地图
if (GBrowserIsCompatible()) {
mapArgs.map = new GMap2(document.getElementById("map"));//添加map
//GKeyboardHandler(map);//添加键盘控制
mapArgs.map.setMapType(G_HYBRID_MAP);//设置为混合地图
mapArgs.map.enableScrollWheelZoom();//支持鼠标滚动
mapArgs.map.enableGoogleBar() ;//显示搜索框
mapArgs.map.addControl(new GLargeMapControl());//添加控制按钮控件
mapArgs.map.addControl(new GMapTypeControl());//添加地图类型选项控件
mapArgs.map.setCenter(new GLatLng(32.507, 111.083), mapArgs.mapSize);//初始坐标(武当山镇)
var gmaker = new GMarker(new GLatLng(32.507, 111.083));
mapArgs.map.addOverlay(gmaker);//添加标记
//添加HTML信息
gmaker.openInfoWindowHtml("<a href='http://www.google.com.hk/search?hl=zh-CN&newwindow=1&safe=strict&q=武当山旅游&meta=&aq=0&aqi=g10&aql=&oq=%E6%AD%A6%E5%BD%93%E5%B1%B1&gs_rfai=' target='_blank'>在google 查看"武当山旅游"</a>");
addMessage();//添加初始信息
GEvent.addListener(mapArgs.map, "moveend", function(){//监听事件
var center = mapArgs.map.getCenter(); //获取当前中心位置
$("#textTagLat").val(center.lat());//纬度
$("#textTagLng").val(center.lng());//经度
$("#buttonTagG").removeAttr("disabled");//go可用
});
}
}
function addMessage(){//添加显示信息
//mapArgs.map.openInfoWindow(mapArgs.map.getCenter(), document.createTextNode("Hello, world"));
}
function goMap(){//根据坐标查找地理位置
var textLat = $("#textTagLat").val().trim();
var textLng = $("#textTagLng").val().trim();
if (null != textLat && textLat.length> 0 && isNaN(textLat) ) {
$("#subLat").text("纬度不能为空.");
$("#buttonTagG").attr("disabled", "disabled");
return;
} else if(null != textLng && textLng.length> 0 && isNaN(textLng)) {
$("#subLng").text("纬度不能为空.");
$("#buttonTagG").attr("disabled", "disabled");
return;
}else{
mapArgs.map.setCenter(new GLatLng(textLat, textLng, mapArgs.mapSize));
}
}
</script>
</head>
<body>
<div id="map">
<input type="text" id="textTagLng" class="button"/>
</div>
<div id="operate">
<pre>纬度:<input type="text" id="textTagLat" class="text" maxlength="18" size="16"/><br><sub id="subLat"></sub> </pre>
<pre>经度:<input type="text" id="textTagLng" class="text" maxlength="18" size="16"/><br><sub id="subLng"></sub> </pre>
<input type="button" id="buttonTagG" value="go" disabled="disabled"/>
</div>
</body>
</html>
分享到：
相关推荐
本示例将深入探讨如何使用 Google Map API，帮助你理解和掌握其核心概念及应用。 首先，要使用 Google Map API，你需要在 Google Cloud Platform 上创建一个项目，并启用 Maps JavaScript API。获取 API 密钥是关键...
### Google Map API 使用详解 #### 一、Google Map API 概览 Google Map API 是一套强大的工具集，允许开发者在其网站或应用中嵌入并定制谷歌地图。这不仅提升了用户体验，也为开发者提供了丰富的地理信息展示手段...
谷歌地图 Google Map API V3 中文开发文档提供了一个详细的中文开发指南，涵盖了谷歌地图 Google Map API V3 的使用方法、相关类库、事件处理等方面的知识点。开发者可以根据自己的需求，选择合适的组件和方法来创建...
9. **权限和密钥管理**：使用Google Map API需要申请API密钥，源代码可能会演示如何正确配置和管理API密钥，避免超出使用限制。 10. **响应式设计**：为了适应不同设备和屏幕尺寸，源代码可能实现了地图的响应式...
这个API密钥是连接你的应用和谷歌地图服务的桥梁，确保你的应用能够合法地使用API资源。 谷歌地图API主要基于JavaScript，因此熟悉JavaScript编程基础是必要的。API的核心在于`<script>`标签，其中包含API的URL和你...
包括 使用文档和例子供大家参考 [removed][removed] [removed][removed] [removed] var gmap = null; var dynMapOv = null; function initialize() { //Load Google Maps gmap = new GMap2(document....
在"SampleWebSite"这个压缩包中，可能包含了一个使用Google Map API 和 ASP.NET(C#)开发的示例网站。这个网站可能演示了如何在ASP.NET环境中集成Google Map API，展示如何显示地图、进行地址查询、添加标记等功能。...
总的来说，"google map api v3.18.0 离线开发包"为开发者提供了在无网络环境下使用谷歌地图API的功能，使得地图服务在多种场景下都具备了可行性。通过熟练掌握和应用这个API，开发者可以创建出丰富多样的地图应用。
### GOOGLE MAP API 示例知识点解析 #### 一、Google Maps JavaScript API 概述 Google Maps JavaScript API 是一个功能强大的工具包，允许开发者将交互式的地图嵌入到网页中。通过使用这个API，开发者可以轻松地...
Google Map API 是一款由谷歌公司提供的强大工具，用于在网页或移动应用中集成地图功能。这个API允许开发者将交互式地图集成到他们的网站或应用程序中，提供定位、导航、地理编码、路线规划等多种功能。最新版的...
google map api 实现自定义mark和其移动
在IT行业中，Google Map API是一个广泛使用的工具，它允许开发者集成地图功能到自己的应用程序中，无论是Web应用还是桌面应用。本示例程序是基于Java语言实现的，它为我们展示了如何利用Google Map API来画点和画线...
由于这个压缩包名为"WebMap"，里面可能包含了一个简单的web应用，展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码，了解上述知识点的实际应用，并进一步扩展自己的地图应用开发...
google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档
在IT领域，Google Map API是开发人员常用的工具之一，它允许我们通过JavaScript编程语言与Google Maps服务进行交互，获取和处理地理位置信息。...理解并熟练使用Google Map API，能极大地提升你的Web应用的用户体验。
Google Map API是一个...综上所述，“Google Map API基本源码”可能包含上述功能的实现示例，对于学习和理解API的使用非常有帮助。通过研究这些源码，开发者能够更好地掌握如何在自己的项目中灵活运用Google Map API。
在本实例中，我们主要探讨如何使用GoogleMap API进行二次开发，并结合Asp.Net、数据库以及GPS技术，创建一个功能丰富的Web应用。首先，我们来深入理解这些关键知识点。 1. GoogleMap API: GoogleMap API是Google...
Google Map API V3（3.9.12）是谷歌提供的一个用于在网页上嵌入交互式地图的服务，它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试，这...
在IT行业中，Google Map API是一个强大的工具，它允许开发者集成地图功能到他们的应用程序中，提供丰富的地理定位服务。本文将详细解析如何利用Google Map API实现"基于Google Map API的简单地图"的功能，包括显示...