`

Google Map ApI 的 一个简单的应用

google 
阅读更多

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

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

一个完整的例子（通过调用 Google Map Api ，输入经纬度数 查找目标地理位置）：

<!DOCTYPE html PUBLIC "-//W<chmetcnv unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0" w:st="on">3C</chmetcnv>//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 Test</title>

 

 

<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

 

 

效果图：

 

 

<!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter" /> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0" /> <v:f eqn="sum @0 1 0" /> <v:f eqn="sum 0 0 @1" /> <v:f eqn="prod @2 1 2" /> <v:f eqn="prod @3 21600 pixelWidth" /> <v:f eqn="prod @3 21600 pixelHeight" /> <v:f eqn="sum @0 0 1" /> <v:f eqn="prod @6 1 2" /> <v:f eqn="prod @7 21600 pixelWidth" /> <v:f eqn="sum @8 21600 0" /> <v:f eqn="prod @7 21600 pixelHeight" /> <v:f eqn="sum @10 21600 0" /> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" /> <o:lock v:ext="edit" aspectratio="t" /> </v:shapetype><v:shape id="_x0000_i1026" type="#_x0000_t75" style='width:480.75pt; height:206.25pt'> <v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/01/clip_image001.png" o:title="" /> </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

 

 

 

 

 

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);
 

 

 

效果图：<!--[if gte vml 1]><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:337.5pt;height:72.75pt'> <v:imagedata src="file:///C:/DOCUME~1/ADMINI~1/LOCALS~1/Temp/msohtml1/01/clip_image003.png" o:title="" /> </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

 

 

 

 

 

 

 

 

<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坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。


 

<body 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关键字进行创建，其语法格式如下所示。

<!--[if !supportLists]-->1. <!--[endif]-->newGMarker(myLatLng,opts)
 

GMarker()地标是Google地图中用于标记地理位置的对象。在实际应用中，GMarker()地标也是所有对象中最常用的一个，第一个参数myLatLng为地标标记的地理位置，该参数为GLatLng()对象，和GMap2.setCenter()的第一个参数一样。第二个参数opts可省略

分享到：
| 一个 关于SimpleDateFormat 小错误
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    谷歌地图Google Map API V3中文开发文档

    谷歌地图 Google Map API V3 是一个基于 JavaScript 的 API，允许开发者在自己的网站或应用程序中嵌入谷歌地图。该 API 提供了一个强大的地图引擎，支持多种类型的地图、标记、路线规划、地标显示等功能。 在谷歌...

    Google Map API 使用示例

    首先，要使用 Google Map API，你需要在 Google Cloud Platform 上创建一个项目，并启用 Maps JavaScript API。获取 API 密钥是关键步骤，它会授权你的应用访问 API 服务。将密钥添加到你的 HTML 或 JavaScript 文件...

    google map api学习

    总之，谷歌地图API是一个强大且功能丰富的工具，适用于各种地理位置相关应用的开发。通过深入学习和实践，你可以利用它构建出各种创新的解决方案，满足不同场景的需求。记得在使用过程中注意API的调用限制和计费政策...

    google map api开发源代码

    Google Map API是一个强大的工具，允许开发者在网页或应用程序中集成地图功能，进行各种定制和交互。这个源代码压缩包提供了一种实现Google Map API二次开发的实例，对于想要深入理解和应用这一技术的人来说非常有...

    GOOGLE MAPapi示例

    Google Maps API 要求每个应用程序都有一个有效的API密钥才能运行。例如： ```plaintext Your key is: ABQIAAAAfEwvcDdw4vWWcmF4ZfYqSRTIqKwA3nrz2BTziwZcGRDeDRNmMxR6qICWZutgjI5f3y7WDu724lzTnQ This key is good...

    google map API 的应用

    学习Google Map API 的最佳方式是从一个简单的示例开始。以下代码展示了如何创建一个以北京故宫为中心的地图： ```html &lt;!DOCTYPE html&gt; ; charset=utf-8"/&gt; &lt;title&gt;Google Maps JavaScript API Example ...

    GoogleMap API + ASP.NET(C#)

    Google Map API 提供了丰富的地图展示和地理定位功能，而ASP.NET(C#)则是一个强大的Web应用程序开发框架，两者结合可以创建出交互性强、功能丰富的地理信息系统。 **Google Map API** Google Map API 是谷歌提供的...

    Google Map Api

    Google Map API 是一款由谷歌...总的来说，Google Map API V3是一个强大的开发工具，为各种地图相关的应用场景提供了丰富的功能和接口。开发者可以通过学习和实践，将地图功能无缝融入到他们的产品中，提升用户体验。

    google map api v3.18.0 离线开发包

    V3.18.0是这个API的一个特定版本，包含了各种更新和改进。在这个离线开发包中，用户可以进行地图相关的开发工作，而无需依赖实时的网络连接。 1. **谷歌地图API基础**：谷歌地图API允许开发者将交互式地图集成到...

    google map api v3源码

    由于这个压缩包名为"WebMap"，里面可能包含了一个简单的web应用，展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码，了解上述知识点的实际应用，并进一步扩展自己的地图应用开发...

    基于Google Map API的简单地图

    在IT行业中，Google Map API是一个强大的工具，它允许开发者集成地图功能到他们的应用程序中，提供丰富的地理定位服务。本文将详细解析如何利用Google Map API实现"基于Google Map API的简单地图"的功能，包括显示...

    Google Map Api 调用样例程序(Java版)

    在IT行业中，Google Map API是一个广泛使用的工具，它允许开发者集成地图功能到自己的应用程序中，无论是Web应用还是桌面应用。本示例程序是基于Java语言实现的，它为我们展示了如何利用Google Map API来画点和画线...

    google地图API实现的一个简单demo

    谷歌地图API是一个强大的工具，它允许开发者在网页或应用程序中集成地图功能，提供导航、定位、地理编码、标记、信息窗口等丰富的地图交互体验。在这个"google地图API实现的一个简单demo"中，我们将探讨如何使用谷歌...

    Google Map API获取地理位置信息

    要从Google Map API获取地理位置信息，首先你需要一个API密钥。这个密钥用于验证你的应用，确保它有权访问Google Maps服务。你可以通过Google Cloud Console创建并管理这些密钥。 获取地点的经纬度坐标通常涉及到...

    GoogleMap Api二次开发+Asp.Net+数据库+GPS

    在本实例中，我们主要探讨如何使用GoogleMap API进行二次开发，并结合Asp.Net、数据库以及GPS技术，创建一个功能丰富的Web应用。首先，我们来深入理解这些关键知识点。 1. GoogleMap API: GoogleMap API是Google...

    Google Map API 开发实例

    在IT行业中，Google Map API是一个强大的工具，它允许开发者集成地图功能到他们的应用程序或网站中，从而实现丰富的地理定位和导航服务。这个压缩包文件似乎包含了一系列关于如何使用Google Map API进行二次开发的...

    Google Map API基本源码

    Google Map API是一个强大的工具，它允许开发者在网页或应用程序中集成地图功能，提供导航、定位、地理编码等服务。这个“Google Map API基本源码”很可能是为了帮助初学者理解和应用这一API而准备的示例代码集合。...

    基于Google Map Api的Android导航应用

    基于Google Map API的Android导航应用，是以Google地图API为依托开发的Android平台的导航软件，它实现了为用户提供更加人性化的路线规划和实时导航服务。如今，智能手机逐渐成为人们生活中不可或缺的一部分，特别是...

    调用googleMap的一个小小应用

    标题“调用googleMap的一个小小应用”涉及到的是在Web开发中如何集成并使用Google Maps API。这个应用可能是一个简单的Web服务或网页，它利用Google Maps的功能来显示地图、定位、导航或其他地理信息相关的功能。 ...

    google map api 实例

    本实例将深入探讨如何使用谷歌地图API来创建一个具有搜索功能的地图应用。 首先，要在网页中引入谷歌地图API，我们需要在HTML文件中添加对应的JavaScript引用。通常，这个引用会以以下格式出现在`&lt;head&gt;`标签内： ...

Magicbox
Global site tag (gtag.js) - Google Analytics