<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script>
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(22.279566, 113.540955);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
</script>
</head>
<body οnlοad="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
即使在这个简单的示例中，也有几点需要注意：
- 我们使用了 <!DOCTYPE html> 声明将应用程序声明为 HTML5。
- 使用 script 标记来加入 Maps API JavaScript。
- 我们创建一个名为“map_canvas”的 div 元素来承载该地图。
- 创建 Javascript 对象常量以保存若干地图属性。
- 编写 Javascript 函数以创建“map”对象。
- 我们从 body 标记的 onload 事件初始化该地图对象。
载入 Google Maps API
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
此标头中的 <meta> 标签会指定如下内容：即应当以全屏模式显示该地图，且用户不能调整地图尺寸。http://maps.google.com/maps/api/js 网址指向 Javascript 文件所在的位置，该文件会载入使用第 3 版 Google Maps API 所需的全部符号和定义。您的网页必须包含指向该网址的 script 标签。
请注意，我们还需要设置 sensor 参数，以指明此应用程序是否使用传感器确定用户的位置。在此示例中，我们将该参数设为变量“set_to_true_or_false”，用于强调您必须将该值显式设为 true 或 false。
当通过 http://maps.google.com/maps/api/js 网址加载 JavaScript Maps API 时，您还可以选择使用 libraries 参数来加载其他库。库是向主 JavaScript API 提供其他功能的代码的模块，但只有在您专门请求时才会加载。
地图选项
要初始化地图，我们需要先创建一个包含地图初始化变量的 Map options 对象。该对象不是构建出来的，而是以对象常量的形式创建出来的。由于我们要将地图的中心设定为某一特定的点，因此，我们还需要创建一个 latlng 值，以保存此位置信息并将其传递到地图的选项中。
我们还设置了初始缩放级别，并将 mapTypeId 设置为 google.maps.MapTypeId.ROADMAP。系统支持以下类型：
- ROADMAP，用于显示 Google Maps 默认的普通二维图块。
- SATELLITE，用于显示拍摄的图块。
- HYBRID，用于同时显示拍摄的图块和突出特征（道路、城市名）图块层。
- TERRAIN，用于显示自然地形图块，自然地形图块中会显示高度和水体特征（山脉、河流等）。
与 Google Maps 第 2 版 API 不同的是，第 3 版中没有设置默认地图类型。您必须明确设置一个初始地图类型，才能查看相应的图块。
google.maps.Map - 基本对象
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
创建新的地图实例时，您需要在网页中指定一个 <div> HTML 元素作为地图的容器。HTML 节点是 Javascript document 对象的子对象，而且我们通过 document.getElementById() 方法获得该元素的引用。Map 类是表示地图的 JavaScript 类。此类的对象定义了网页上的单个地图。（您可以创建此类的多个实例，每个对象都将在网页上定义一个单独的地图。）我们使用 Javascript new 操作符创建此类的一个新实例。
此代码可定义一个名为 map 的变量，然后将该变量分配给新的 Map 对象，同时将该变量传递到在 myOptions 对象常量内定义的选项中。这些选项将会用于初始化地图的属性。Map() 函数称为“构造函数”，其定义如下：
google.maps.Map( opts ) 使用 opts 参数中传递的可选参数来创建新地图。
纬度和经度
我们还需要一种引用各种地图位置的方法。在 Google Maps API 中，google.maps.LatLng 对象提供了此类机制。您可以构建一个 LatLng 对象，以 {纬度, 经度} 的顺序传递其参数：
1 | var myLatlng = new google.maps.LatLng(myLatitude, myLongitude) |
请注意：将“地址”转变为地理地点的过程叫做“地址解析”。此版本的 Google Maps API 可支持地址解析。
LatLng 对象在 Google Maps API 中用途广泛。例如，google.maps.Marker 对象会在其构造函数中应用 LatLng，并在地图上所指定的地理位置上添加标记 叠加层。
缩放级别
如果要将包含完整地球的地图作为单幅图片提供，则要么需要极大的地图，要么需要分辨率极低的小型地图。因此，Google Maps 和 Maps API 内的地图图像被分割为地图“图块”和“缩放级别”两部分。在低缩放级别下，一小组地图图块就可以覆盖广阔的区域；而在高缩放级别下，图块的分辨率会更高，覆盖的区域则会更小。
要指定地图的显示分辨率，您可以设置 Map 的 zoom 属性，其中缩放 0 相当于将地球地图缩小到最低程度，而较高的缩放级别会将地图放大到较高的分辨率。
2898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
