一、Hello world
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&v=2.x&sensor=false&key=ABQIAAAANRezeZZ4Y86oPrQq_VldhRRVHwv1xZ1uiERqpxy2XNaDfXdQnhSgufHt51owMdzuslJluCsiEbNIPg" type="text/javascript"></script>
<body>
<div id="mapContainer" style="height:600px; width:800px;"></div>
</body>
<script type="text/javascript">
var map = new GMap2(document.getElementById("mapContainer"));
map.setCenter(new GLatLng(33.0, 106.0), 5);
</script>
</html>
1.<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&v=2.x&sensor=false&key=ABQIAAAANRezeZZ4Y86oPrQq_VldhRRVHwv1xZ1uiERqpxy2XNaDfXdQnhSgufHt51owMdzuslJluCsiEbNIPg" type="text/javascript"></script>
网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签，使用注册 API 时收到的密钥。
key是密钥，v是版本
2.var map = new GMap2(document.getElementById("mapContainer")); 页面里必须有id为mapContainer的元素来放地图内容
3.map.setCenter(new GLatLng(33.0, 106.0), 5); 设置中心点，第一个参数是表示经纬度，第二个参数表示地图缩放等级。
二、简单讲解
1.<body onload="initialize()" onunload="GUnload()">
可以用initialize()方法来初始化地图，GUnload()方法是谷歌提供的，用来防止内存泄漏的实用工具函数。
2.new GLatLng(myLatitude, myLongitude)
myLatitude经度，myLongitude纬度
3.地图属性
G_NORMAL_MAP- 默认视图
G_SATELLITE_MAP - 显示 Google 地球卫星图像
G_HYBRID_MAP - 混合显示普通视图和卫星视图
G_DEFAULT_MAP_TYPES - 这三个类型的数组，在需要重复处理的情况下非常有用
map.setMapType(G_SATELLITE_MAP);
4.信息窗口
GMap2 对象提供了 openInfoWindow() 方法，该方法将一个点和一个 HTML DOM 元素作为参数。HTML DOM 元素附加到信息窗口容器中，信息窗口的尖端会固定在指定点上。
GMap2 的 openInfoWindowHtml() 方法相似，但是它使用 HTML 字符串作为其第二个参数而不是 DOM 元素。
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
var myHtml= "<b>#" + number+ "</b><br/>" + message[number-1];
map.openInfoWindowHtml(map.getCenter(), myHtml);
5.事件监听器
1）点击地图后弹框
GEvent.addListener(map, "click", function() {
alert("您点击了地图。");
});
2）拖动地图后，显示经纬度
GEvent.addListener(map, "moveend", function() {
var center= map.getCenter();
document.getElementById("message").innerHTML= center.toString();
});
3）带参数的事件
GEvent.addListener(map,"click", function(overlay, latlng) {
if (latlng) {
var myHtml= "GPoint 为: " + map.fromLatLngToDivPixel(latlng) + ",
缩放级别:" + map.getZoom();
map.openInfoWindow(latlng, myHtml);
}
});
三、添加控件
GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。
GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。
GSmallZoomControl - 小型缩放控件（无平移控件），用于在 Google 地图上显示行车路线的小地图弹出窗口。
GScaleControl - 地图比例尺
GMapTypeControl - 让用户切换地图类型（例如“地图”和“卫星”）的按钮
GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。
GOverviewMapControl - 位于屏幕一角的可折叠概览地图。
map.addControl(new GLargeMapControl());
所有这些控件都基于 GControl 对象。
GMapTypeControl 和 GHierarchicalMapTypeControl 是特殊情况，因为它们还可以进行配置。这些控件增加的功能可以更改 Google 地图 API 中的地图当前所用的 GMapType。有关配置这些控件的详细信息，请参见修改标准控件的结构。
下面是当前支持的地图类型列表：
•G_NORMAL_MAP 显示 Google 地图默认的普通二维图块
•G_SATELLITE_MAP 显示拍摄的图块
•G_HYBRID_MAP 同时显示拍摄的图块和普通（突出显示道路、城市名等明显地图特征）图块
•G_PHYSICAL_MAP 根据地形信息显示实际地图图块
addControl 方法有第二个可选的参数 GControlPosition，可用于指定控件在地图上的位置。它可以是以下值之一，这些值分别指定要放置控件的地图某个角：
•G_ANCHOR_TOP_RIGHT
•G_ANCHOR_TOP_LEFT
•G_ANCHOR_BOTTOM_RIGHT
•G_ANCHOR_BOTTOM_LEFT
如果不包含此参数，则地图 API 会使用控件指定的默认位置。
GControlPosition 还可以指定偏移量，来指示控件的放置位置与地图边界间隔多少像素。这些偏移量使用 GSize 对象指定。
var bottomRight= new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(new GMapTypeControl(), bottomRight);
四、地图叠加层
叠加层是地图上绑定到经度/纬度坐标的对象，会随您拖动或缩放地图而移动。叠加层用于反映您“添加”到地图上以指明点、线或区域的对象。。
地图 API 有如下几种叠加层：
•地图上的点使用标记来显示，通常显示自定义图标。标记是 GMarker 类型的对象，并且可以利用 GIcon 类型的对象来自定义图标。
•地图上的线使用折线（表示点的集合）来显示。线是类型为 GPolyline 的对象。
•地图上的区域显示为多边形（如果是任意形状的区域）或底面叠加层（如果是矩形区域）。多边形类似于闭合的折线，因此可以是任何形状。地面叠加层通常用于地图上与图块有直接或间接关联的区域。
•地图本身使用图块叠加层显示。如果您有自己的系列图块，可以使用 GTileLayerOverlay 类来改变地图上已有的图块，甚至可以使用 GMapType 来创建您自己的地图类型。
•信息窗口也是一种特殊的叠加层。但是请注意，信息窗口会自动添加到地图中，并且地图只能添加一个类型为 GInfoWindow 的对象。
每个叠加层都实现 GOverlay 接口。可以使用 GMap2.addOverlay() 方法向地图添加叠加层，使用 GMap2.removeOverlay() 方法删除叠加层。
1)标记
map.addOverlay(new GMarker(new GLatLng(x,y)));
可以拖动的标记
标记可点击但不可拖动，所以它们需要通过将额外的标记选项 draggable 设置为 true 来初始化。
var marker= new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("弹起来了...");
});
map.addOverlay(marker);
2）图标（标记）
var blueIcon= new GIcon(G_DEFAULT_ICON);
blueIcon.image= "http://www.google.cn/intl/en_us/mapfiles/ms/micons/blue-dot.png";
var markerOptions= { icon:blueIcon};
map.addOverlay(new GMarker(point, markerOptions));
3) 折线
折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色应是十六进制数字 HTML 样式，例如使用 #ff0000 而非 red。GPolyline 无法识别命名颜色。
GPolyline 对象使用浏览器的矢量绘制功能（如果可用）。在 Internet Explorer 中，Google 地图使用 VML（请参阅 XHTML 和 VML）绘制折线；在其他浏览器中使用 SVG（如果可用）。在所有其他环境中，我们从 Google 服务器请求一个线段图像并将该图像叠加到地图上，当地图缩放和拖动时按需要刷新图像。
以下代码段会在两点之间创建 10 像素宽的红色折线：
var polyline= new GPolyline([
new GLatLng(39.9493, 116.3975),
new GLatLng(39.9593, 116.4071)
], "#ff0000", 10);
map.addOverlay(polyline);
相关推荐
**谷歌地图开发快速入门** 谷歌地图API是Google提供的一项服务，允许开发者利用JavaScript技术构建基于Google Maps的应用和服务。这个API让开发者能够自定义地图显示、添加标记、实施地理编码、规划路线、执行本地...
#### 二、Google地图API入门：“Hello, World”示例 ##### 1. 加载Google地图API 要在网页中加载Google地图API，首先需要在HTML文档的`<head>`部分引入API的脚本文件。以下是一个典型的加载方式： ```html ...
GOOGLE搜索从入门到精通，这是一篇关于掌握GOOGLE搜索引擎使用技巧的全面指南。首先，我们来深入了解GOOGLE的基本信息和特色。 一、GOOGLE简介 GOOGLE是由Larry Page和Sergey Brin两位斯坦福大学博士生在1998年创立...
此外，还会涉及到一些高级话题，如通知（Notification）、多媒体处理、地图API集成（Google Maps API）、推送服务（例如Firebase Cloud Messaging）以及Android的多线程和异步编程模型，比如Handler、Looper和线程池...
在描述中提到，Google Maps API 使得在 Java Web 应用中集成地图变得更加简单。 2. **Ajax（Asynchronous JavaScript and XML）**：Ajax 是一种用于创建快速动态网页的技术，它允许页面在不重新加载整个页面的情况...
最后，对于初学者，建议从搭建一个简单的地图展示开始，逐步增加功能，如添加标记、搜索地点、绘制路径等。通过实践，你将逐渐掌握Web地图开发的核心技术，为更复杂的地理信息系统项目打下坚实基础。在学习过程中，...
Ajax（Asynchronous JavaScript and XML...总结，Ajax简单入门主要涉及理解其基本概念、工作流程，掌握不同实现方式，并了解其在实际项目中的广泛应用。通过学习和实践，开发者可以有效地提高网页的交互性和用户体验。
在《Google+Android开发入门与实战》中，实战部分将带领读者通过实际项目来巩固所学知识，例如开发一个简单的天气应用，涉及网络请求、JSON解析、动态加载数据等内容。这样的实战经验有助于提升解决问题的能力，并...
易语言是中国自主研发的一种简单易学的编程语言，其特点是语法简洁，适合初学者入门。这个工具可能帮助用户自定义地图视图、获取地理位置信息、标注点位、规划路线等。 【描述】"google地图生成工具"说明了该程序的...
第二章《数据篇》介绍了获取地理空间数据的途径和工具，如稻歌GoogleMap截获器、地理空间数据云、国家综合地球观测数据共享平台和DIVA-GIS等，这些工具和平台为GIS数据的获取提供了便捷的途径，是学习和应用GIS不可...
Web和移动设备上的Flutter简易Google Maps 入门 移动的 遵循“移动设备”的设置 网页 好去！ EasyGoogleMaps ( apiKey : 'YOUR_API_KEY_HERE' , address : 'Infinite Loop, Cupertino, CA 95014' , title : '...
它可能需要对接公开的地理信息服务，如谷歌地图API或OpenStreetMap API，获取地图瓦片或地理编码服务。 3. **用户界面**：HTML和JavaScript共同构建用户界面，JavaScript提供地图的交互功能，如地图的缩放和平移，...
它能够与SuperMap iServer Java服务配合使用，也可以连接第三方地图服务，如天地图、Google Map、Microsoft Bing Maps和OpenStreetMap。 2. **“Hello，SuperMap iClient for Flex”** 开发一个简单的Web GIS系统...