Google地图API是一种通过JavaScript将Google地图嵌入到您的网页的API。它提供了很多处理地图的功能和向地图添加内容的服务,让您能够在您的网站上创建功能全面的地图应用。
一个地图API密钥只对一个“目录”或域有效(你必须有Google 帐户才能获得地图API密钥,并且API密钥会和你的Google账户联系)。
一个完整的例子(通过调用 Google Map Api ,输入经纬度数 查找目标地理位置):
DOCTYPE html PUBLIC "-//W
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Static Map Testtitle>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAiWserKTZU9nXfUSx4Ei4RRQT4TVb4Et3w7laIFSFPt88-zJrlhTsIXqnbpAMpN2EGXsbZjLVtRxnHg" type="text/javascript">script>
<script type="text/javascript">
var map;
var myMarker;
function load() {
map = new GMap2(document.getElementById("map"));
if (GBrowserIsCompatible()) {
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var myLatLng = new GLatLng(25.0476, 121.517);
map.setCenter(myLatLng, 13);
myMarker = new GMarker( myLatLng );
map.addOverlay( myMarker );
}
}
function Gsubmit() {
var ew = document.getElementById("east").value;
var ns = document.getElementById("north").value;
var myLatLng = new GLatLng(ns,ew);
map.panTo(new GLatLng(ns,ew));
myMarker.setLatLng( myLatLng );
var myGeocoder = new GClientGeocoder();
myGeocoder.getLocations(myLatLng, function(addresses) {
if(addresses.Status.code != 200) {
alert("此坐标没有找到对应的地址 " + myLatLng.toUrlValue());
}
else {
var result = addresses.Placemark[0];
myMarker.openInfoWindowHtml( result.address );
document.getElementById('address').value = result.address;
}
});
}
script>
head>
<body onload="load()" onunload="GUnload()">
<div id="map" align="center" style="width: 1300px; height: 500px">div>
<table align="center" border='1'>
<th>纬度:<input type='text' id='north'/> th>
<th>经度:<input type='text' id='east'/> th>
<th><input type='submit' name='submitName' value='查询' onclick="Gsubmit();"/> th>
<tr ><th colspan="2">具体位置:<input type='address' id='address'/>th>tr>
table>
body>
html>
在浏览器中输入:http://localhost:8080/mps/testGoogleMap.html
效果图:
new GlatLng(39.917, 116.397)括号中的参数值代表的是 目标的维度,和经度。
在Google地图API中,GLatLng对象提供了此类机制。可以构造一个GLatLng对象,按照制图学的惯例{经度,纬度}的顺序传递参数:注意:将“地址”转变为地理点的过程称为“地址解析”
纬度和经度使用逗号分隔的文本字符串内的数字定义,可精确到 6 位小数。例如,“40.714728,-73.998672”是有效的地址解析值。小数点 6 位之后的部分将忽略
纬度和经度值必须对应于地球表面的有效位置。纬度可以是-90
到90
之间的任何值,经度可以是-180
到180
之间的任何值。如果指定了无效的纬度或经度值,则您的请求将作为错误请求被拒绝。
panTo
方法把地图的中心移动到一个指定点。如果指定点在地图的可见区域内,地图中心会平滑地平移到指定点,否则地图中心会直接跳到那个点。(一般用于目标位置的查询)
map.panTo(new GLatLng(37.4569, -122.1569))
地图上添加控件
可以用addControl
方法在地图上添加控件。在这个例子里,我们加入GSmallMapControl
和GMapTypeControl
控件,这样我们分别可以移动/缩放地图以及在地图和卫星模式之间切换
代码示例:var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
效果图:
<body onload="load()" >
从body标签的load事件初始化地图对象
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAiWserKTZU9nXfUSx4Ei4RRQT4TVb4Et3w7laIFSFPt88-zJrlhTsIXqnbpAMpN2EGXsbZjLVtRxnHg" type="text/javascript">script>
使用Script 标签包含Google地图API
地图DOM元素
<div id="map" align="center" style="width: 1300px; height: 500px">div>
map = new GMap2(document.getElementById("map"));
效果图 创建名为map的div层 包含地图原素
var map = new GMap2(document.getElementById("map"));
Gmap2类是表示地图的JavaScript类。此类的对象在页面上定义单个地图。(可以创建此类的多个实例,每个对象将在页面上定义一个不同的地图。)
当创建新的地图实例时,在页面中指定一个DOM节点(通常是div元素)作为地图的容器,通过document.getElementById()方法获得该元素的引用。
构造函数
|
说明
|
GMap2(container, opts?)
|
在通常是一个 DIV 元素的指定 HTML container 内创建新地图。您也可以通过 opts 参数传递 GMap2Options 类型的可选参数
|
请注意因为JavaScript是松散型语言,我们可以不填写构造函数的任何可选参数。
初始化地图
map.setCenter(new GLatLng(39.9493, 116.3975),13);//没有这一句不会显示地图来的
注意map.setCenter()的最后一个参数13表示的是 地图加载的的时候缩放大小!
通过Gmap2构造函数创建地图后,我们需要再做一件事:将其初始化。初始化通过地图的setCenter()方法完成。SetCenter()方法要求有GlatLng坐标和缩放级别,而且必须先发送此方法,然后再在地图上执行其他任何操作,包括设置地图本身的其他任何属性。
onload="intialize()" onunload="GUnload()">
GUnload()函数是用来防止内存泄漏的实用工具函数。
window.setTimeout(function(){
map.panTo(new GLatLng(39.927, 116.407));
},2000);
上面这个方法是在等待两秒钟,然后平移到新中心点
//创建GMarker对象
myMarker = new GMarker( myLatLng );
//在地图上为marker0添加涂层,显示marker0
map.addOverlay( myMarker );
1.创建基本的GMarker()对象
GMarker()对象使用new关键字进行创建,其语法格式如下所示。
1. newGMarker(myLatLng,opts)
GMarker()地标是Google地图中用于标记地理位置的对象。在实际应用中,GMarker()地标也是所有对象中最常用的一个,第一个参数myLatLng为地标标记的地理位置,该参数为GLatLng()对象,和GMap2.setCenter()的第一个参数一样。第二个参数opts可省略