1.获取客户所选择的坐标
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google 地图 JavaScript API 示例: 标记拖动事件</title>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("zan_canvas"));
var center = new GLatLng(39.917,116.397);
map.setCenter(center, 14);
var marker = new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
var windowHtml="<span style='color:gray'>";
windowHtml=windowHtml+"纬度："+marker.getLatLng().lat()+"<br />经度："+marker.getLatLng().lng();
windowHtml=windowHtml+"</span>";
marker.openInfoWindowHtml(windowHtml);
document.getElementById("lat").value=marker.getLatLng().lat();
document.getElementById("lng").value=marker.getLatLng().lng();
});
map.addOverlay(marker);
map.addControl(new GSmallMapControl());
map.disableDragging()//禁用地图拖拽,默认为允许，禁止拖拽后，缩放好像自动会被禁止
map.disableDoubleClickZoom()//禁用双击缩放，默认为允许
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="zan_canvas" style="width: 500px; height: 300px"></div>
<div>
纬度：<input type="text" name="lat" id="lat" />
经度：<input type="text" name="lng" id="lng" />
</div>
<div>
做客户端程序的时候，加上form，并将input改为hidden即可
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/examples/
</div>
</body>
</html>
使用以上代码，即可获得客户选择的位置经纬度，将此数值保存到数据库
2.展示客户选择的位置
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google 地图 JavaScript API 示例: 信息窗口</title>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.91717540663561, 116.41757011413574), 14);
map.openInfoWindow(map.getCenter(),
document.createTextNode("地铁五号线，灯市口站。"));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 700px; height: 300px"></div>
<div>
<img src="http://ditu.google.cn/maps/api/staticmap?zoom=14&size=300x300&maptype=roadmap&mobile=true&markers=39.91717540663561,116.41757011413574&sensor=false&language=zh_CN" />
</div>
</body>
</html>
其它用法参考http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/examples/
分享到：
相关推荐
通过这个示例，你应该能了解Google地图API的基本使用方法。它是一个功能丰富的API，可以满足各种地图相关的开发需求。继续探索`GoogleMapSample`，你会发现更多实用的示例和技巧，帮助你构建出更具交互性和用户体验...
C#的谷歌地图调用示例，经测试能够正常运行。非常好用，需要的朋友尽快下载。
要使用 Google 地图 API，首先需要加载 Google 地图 API。加载 Google 地图 API 需要在 HTML 文件中添加一行 JavaScript 代码，用于加载 Google 地图 API。例如：<script src="https://maps.googleapis....
本文档旨在为开发者提供一个详细的中文开发指南，介绍谷歌地图 Google Map API V3 的使用方法、相关类库、事件处理等方面的知识点。 一、Google Maps JavaScript API V3 谷歌地图 Google Map API V3 是一个基于 ...
谷歌地图应用示例源码 功能描述： 1.增加多标签 Tab 项支持 2.Javascript 脚本压缩输出 3.增加用户自定义标注支持 4.用户自定义标注点支持消息显示和回调函数自定义 CallBack 5.改进 google maps 处理流程 6.标注点...
离线Google地图API是开发者在没有网络连接时仍然可以使用谷歌地图服务的一种技术。这个API主要是基于JavaScript构建，特别是V3版本，它提供了丰富的功能，让开发者能够在本地环境中展示地图数据。本文将深入探讨离线...
本文将详细介绍如何在Asp.NET项目中使用谷歌地图控件，并展示其实现各种功能的示例。 首先，谷歌地图API是Google提供的一项服务，允许开发者在网页或应用程序中嵌入交互式地图。Asp.NET版的GoogleMap控件是基于这个...
【标题】：Google地图应用示例源码解析 在IT领域，地图应用是不可或缺的一部分，尤其是在定位服务、导航...通过学习和理解这个源码，开发者可以进一步掌握Google地图API的使用，为自己的项目构建功能丰富的地图功能。
Qt 谷歌地图的示例程序。 一点不懂webkit和javascript开始摸起。如有疏漏多多斧正。 例子的功能就是在标准的qt主窗口加载一个谷歌地图。webkit在（0，0）放置一个图标。地图移动后通知Qt在标准输出打印经纬度。 ...
下面是一段示例代码，展示了如何在谷歌地图上加载自定义瓦片： ```java public class MainActivity extends AppCompatActivity implements OnMapReadyCallback { private GoogleMap googleMap; private ...
在这个特定的例子中，我们将深入探讨如何使用谷歌地图API来实现运动轨迹的绘制以及在轨迹上添加箭头指示方向。 首先，我们需要在网页上加载谷歌地图API。这通常通过在HTML文件中插入一个JavaScript标签来完成，其中...
本示例将深入探讨如何使用 Google Map API，帮助你理解和掌握其核心概念及应用。 首先，要使用 Google Map API，你需要在 Google Cloud Platform 上创建一个项目，并启用 Maps JavaScript API。获取 API 密钥是关键...
在IT领域，Google Map是一款广泛使用的在线地图服务，它提供了丰富的功能，如定位、导航、路线规划、街景查看等。本应用实例将探讨如何利用Google Map API在离线环境中实现地图服务，这对于那些网络不稳定或者需要在...
此外，考虑到谷歌地图的版权问题，使用离线谷歌地图切片可能受到限制，因此在实际应用中，你可能需要寻找其他开源地图服务或创建自己的地图切片。 总之，OpenLayers 3调用离线谷歌切片地图涉及对地图容器的设置、...
“水晶易表中使用谷歌地图.xlf”文件很可能是水晶易表的一个工作簿文件，其中包含了已经设置好的地图集成示例。打开这个文件，你可以看到如何配置Web对象，如何将地图与数据源连接，以及可能的交互逻辑。这将帮助你...
这个"谷歌地图 示例"可能是一个项目或者教程，展示了如何利用谷歌地图API进行定制化操作，如绘制线路和使用图例功能。下面将详细探讨这些知识点。 首先，谷歌地图API允许开发者在网页上嵌入地图，通过JavaScript...
9. 性能和限制：谷歌地图API有免费的使用配额，超过后可能需要购买额外的用量。同时，为了防止滥用，API也有一系列的安全措施，如API密钥管理和速率限制。 10. 开发工具和文档：谷歌提供了详尽的开发文档、示例代码...
谷歌地图 大批量打点marker 聚合打点 例子，可以参考，国内可以打开。
10. **示例代码分析**: `GoogleMapsExample`很可能是包含上述示例代码的项目，它可能包含多个示例，展示了谷歌地图API的不同功能和使用方式。 学习谷歌地图API需要一定的JavaScript基础，但是一旦掌握，你就能构建...