要求调到google公司提供的免费的地图API 接口，此接口是纯javascript脚本
<!DOCTYPE html "-//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 JavaScript API Example</title>
<script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
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.9493, 116.3975), 13);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
如上面所示google地图其实就是调用其api函数（javascript）函数
1；使用<script>函数调用googleMap api的javascript
2：创建一个画布也就是一个容器<div>名为map_canvas 这个里面是显示地图的
3: var map = new GMap2(document.getElementById("map_canvas")); 定义这个div对象作为一个地图
4: map.setCenter(new GLatLng(39.9493, 116.3975), 13); 设置这个地图的中心
5:
<script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javascript">
</script>
分析: http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false
此url指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置
sensor 参数以指明此应用程序是否使用传感器来确定用户位置 但必须显示是表示是用true or false
6: <div id="map_canvas" style="width: 500px; height: 300px"></div>
要让地图在网页上显示，必须为其留出一个位置。
通常，我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。
我们定义名为“map_canvas”的 div，并使用样式属性设置其尺寸。
地图会自动使用容器尺寸调整自身的尺寸，除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。
7: GMap2 对象: var map = new GMap2(document.getElementById("map_canvas"));
GMap2 类是表示地图的 JavaScript 类。此类的对象在页面上定义单个地图。
可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。
我们使用 JavaScript new 操作符创建此类的一个新实例。
当创建新的地图实例时，在页面中指定一个 DOM 节点（通常是 div 元素）作为地图的容器。
HTML 节点是 JavaScript document 对象的子对象，而且我们通过 document.getElementById() 方法获得该元素的引用。
构造函数: GMap2(container, opts?) :
在通常是一个 DIV 元素的指定 HTML container 内创建新地图。您也可以通过 opts 参数传递 GMap2Options 类型的可选参数。
8: 初始化地图 map.setCenter(new GLatLng(39.9493, 116.3975), 13);
通过 GMap2 构造函数创建地图后，我们需要将其初始化。
初始化通过地图的 setCenter() 方法完成。
setCenter() 方法要求有 GLatLng 坐标和缩放级别，
而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。
9: 加载地图 <body onload="initialize()" onunload="GUnload()">
当 HTML 页面显示时，文档对象模型 (DOM) 即会扩展，接收其他外部图像和脚本并将其合并到 document 对象中。
为确保我们的地图仅放置在完全加载后的页面上，
我们仅在 HTML 页面的 <body> 元素收到 onload 事件后才执行构造 GMap2 对象的函数。
这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。
10: 既然现在已经有地图了，我们还需要一种方法来引用地图上的位置。
在 Google 地图 API 中，GLatLng 对象提供了此类机制。
可以构造一个 GLatLng 对象，按照制图学的惯例以 {经度, 纬度} 的顺序传递参数：
var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude) 将“地址”转变为地理点的过程称为“地址解析"
就像它可用于轻松地引用地理点一样，它也可用于定义对象的地理边界。
例如，地图在称为视口的窗口内显示整个世界的当前“窗口”。此视口可以通过四个角上的矩形点来定义。
GLatLngBounds 对象提供了这个功能，通过使用分别表示边界框的西南角和东北角的两个 GLatLng 对象定义一个矩形区域来实现。
11: 地图交互
既然现在有了 GMap2 对象，就可以与之进行交互了。
基本地图对象的外观和行为与您在 Google 地图网站上交互的地图非常相似，
并带有大量内置行为。GMap2 对象还提供了大量配置方法来改变地图对象本身的行为。
GMap2 对象支持可以直接改变地图状态的大量方法。
例如，setCenter()、panTo 和 zoomIn() 方法通过编程来操作地图，
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
window.setTimeout(function() { map.panTo(new GLatLng(39.927, 116.407)); }, 1000);
12: Google 地图 API的地图都有可能显示类型为 GInfoWindow 的单个“信息窗口”，
该窗口在地图上端以浮动窗口显示 HTML 内容。信息窗口有点像漫画书上的文字气球；
它有一个内容区域和锥形引线，引线的头在地图的指定点上。
点击 Google 地图上的标记可以看到活动的信息窗口。
GInfoWindow 对象没有构造函数。当创建地图时，会自动创建一个信息窗口并将其附加到地图上
GMap2 对象提供了 openInfoWindow() 方法，该方法将一个点和一个 HTML DOM 元素作为参数。
HTML DOM 元素附加到信息窗口容器中，信息窗口的尖端会固定在指定点上。
GMap2 的 openInfoWindowHtml() 方法相似，但是它使用 HTML 字符串作为其第二个参数而不是 DOM 元素。
如:
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
GBrowserIsCompatible() 判断此浏览器是否支持google Map api
<!DOCTYPE html "-//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 JavaS
<script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javas
</script>
<script type="text/javas
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
}
}
</script>
</head>
<body on
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
如上面所示google地图其实就是调用其api函数（javas
1；使用<script>函数调用googleMap api的javas
2：创建一个画布也就是一个容器<div>名为map_canvas 这个里面是显示地图的
3: var map = new GMap2(document.getElementById("map_canvas")); 定义这个div对象作为一个地图
4: map.setCenter(new GLatLng(39.9493, 116.3975), 13); 设置这个地图的中心
5:
<script src="http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false"
type="text/javas
</script>
分析: http://ditu.google.cn/maps?file=api&v=2&key=abcdefg&sensor=true_or_false
此url指向包含使用 Google 地图 API 所需所有符号和定义的 JavaS
sensor 参数以指明此应用程序是否使用传感器来确定用户位置 但必须显示是表示是用true or false
6: <div id="map_canvas" style="width: 500px; height: 300px"></div>
要让地图在网页上显示，必须为其留出一个位置。
通常，我们通过创建名为 div 的元素并在浏览器的文档对象模型 (DOM) 中获取此元素的引用执行此操作。
我们定义名为“map_canvas”的 div，并使用样式属性设置其尺寸。
地图会自动使用容器尺寸调整自身的尺寸，除非使用构造函数中的 GMapOptions 显式地为地图指定尺寸。
7: GMap2 对象: var map = new GMap2(document.getElementById("map_canvas"));
GMap2 类是表示地图的 JavaS
可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。
我们使用 JavaS
当创建新的地图实例时，在页面中指定一个 DOM 节点（通常是 div 元素）作为地图的容器。
HTML 节点是 JavaS
构造函数: GMap2(container, opts?) :
在通常是一个 DIV 元素的指定 HTML container 内创建新地图。您也可以通过 opts 参数传递 GMap2Options 类型的可选参数。
8: 初始化地图 map.setCenter(new GLatLng(39.9493, 116.3975), 13);
通过 GMap2 构造函数创建地图后，我们需要将其初始化。
初始化通过地图的 setCenter() 方法完成。
setCenter() 方法要求有 GLatLng 坐标和缩放级别，
而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。
9: 加载地图 <body on
当 HTML 页面显示时，文档对象模型 (DOM) 即会扩展，接收其他外部图像和脚本并将其合并到 document 对象中。
为确保我们的地图仅放置在完全加载后的页面上，
我们仅在 HTML 页面的 <body> 元素收到 on
这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。
10: 既然现在已经有地图了，我们还需要一种方法来引用地图上的位置。
在 Google 地图 API 中，GLatLng 对象提供了此类机制。
可以构造一个 GLatLng 对象，按照制图学的惯例以 {经度, 纬度} 的顺序传递参数：
var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude) 将“地址”转变为地理点的过程称为“地址解析"
就像它可用于轻松地引用地理点一样，它也可用于定义对象的地理边界。
例如，地图在称为视口的窗口内显示整个世界的当前“窗口”。此视口可以通过四个角上的矩形点来定义。
GLatLngBounds 对象提供了这个功能，通过使用分别表示边界框的西南角和东北角的两个 GLatLng 对象定义一个矩形区域来实现。
11: 地图交互
既然现在有了 GMap2 对象，就可以与之进行交互了。
基本地图对象的外观和行为与您在 Google 地图网站上交互的地图非常相似，
并带有大量内置行为。GMap2 对象还提供了大量配置方法来改变地图对象本身的行为。
GMap2 对象支持可以直接改变地图状态的大量方法。
例如，setCenter()、panTo 和 zoomIn() 方法通过编程来操作地图，
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
window.setTimeout(function() { map.panTo(new GLatLng(39.927, 116.407)); }, 1000);
12: Google 地图 API的地图都有可能显示类型为 GInfoWindow 的单个“信息窗口”，
该窗口在地图上端以浮动窗口显示 HTML 内容。信息窗口有点像漫画书上的文字气球；
它有一个内容区域和锥形引线，引线的头在地图的指定点上。
点击 Google 地图上的标记可以看到活动的信息窗口。
GInfoWindow 对象没有构造函数。当创建地图时，会自动创建一个信息窗口并将其附加到地图上
GMap2 对象提供了 openInfoWindow() 方法，该方法将一个点和一个 HTML DOM 元素作为参数。
HTML DOM 元素附加到信息窗口容器中，信息窗口的尖端会固定在指定点上。
GMap2 的 openInfoWindowHtml() 方法相似，但是它使用 HTML 字符串作为其第二个参数而不是 DOM 元素。
如:
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
GBrowserIsCompatible() 判断此浏览器是否支持google Map api
分类:
图表
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！