Google Map ApI 的 一个简单的应用

阅读更多

Google地图API是一种通过JavaScriptGoogle地图嵌入到您的网页的API。它提供了很多处理地图的功能和向地图添加内容的服务,让您能够在您的网站上创建功能全面的地图应用。

一个地图API密钥只对一个“目录”或域有效(你必须有Google 帐户才能获得地图API密钥,并且API密钥会和你的Google账户联系)。

一个完整的例子(通过调用 Google Map Api ,输入经纬度数 查找目标地理位置):

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

 

<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 GlatLng39.917, 116.397)括号中的参数值代表的是 目标的维度,和经度。


 

Google地图API中,GLatLng对象提供了此类机制。可以构造一个GLatLng对象,按照制图学的惯例{经度,纬度}的顺序传递参数:注意:将“地址”转变为地理点的过程称为“地址解析”

 

 

纬度和经度使用逗号分隔的文本字符串内的数字定义,可精确到 6 位小数。例如,“40.714728,-73.998672”是有效的地址解析值。小数点 6 位之后的部分将忽略

 

 

纬度和经度值必须对应于地球表面的有效位置。纬度可以是-9090之间的任何值,经度可以是-180180之间的任何值。如果指定了无效的纬度或经度值,则您的请求将作为错误请求被拒绝。

 

 

 

 

panTo方法把地图的中心移动到一个指定点。如果指定点在地图的可见区域内,地图中心会平滑地平移到指定点,否则地图中心会直接跳到那个点。(一般用于目标位置的查询)

 

 

map.panTo(new GLatLng(37.4569, -122.1569))

 

地图上添加控件

 

可以用addControl方法在地图上添加控件。在这个例子里,我们加入GSmallMapControlGMapTypeControl控件,这样我们分别可以移动/缩放地图以及在地图和卫星模式之间切换

 

 

代码示例: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"));

 

 

效果图 创建名为mapdiv 包含地图原素

 

 

 

 

 

 

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可省略

你可能感兴趣的:(google)