原文引自:http://blog.csdn.net/myxx520/archive/2010/02/24/5321352.aspx
关于 GoogleMapAPI 的使用说明
1. GoogleMapAPI 介绍
a) Google 地图 API 是一种通过 JavaScript 将 Google 地图嵌入到您的网页的 API 。该 API 提供了大量实用工具用以处理地图（正如 http://maps.google.com 网页上的地图），并通过各种服务向地图添加内容，从而使您能够在您的网站上创建功能全面的地图应用程序。
2. 相关函数调用以及在实际项目中的应用
a) 首先注册一个 google 帐号， http://code.google.com/intl/zh-CN/apis/maps/signup.html 随后在上述地址上面生成对应的 Key ，比如我们得到的 Key 为 ABQIAAAAhrsyA85kX5AhsROY61ghERSePc6gwvi5Rm1hdFkqvyx4TFycQxSUo39qJRxqmJjnbPYhTiCZ8RbpWQ ，这个 Key 在加载 googlemap 对应的 js 的时候需要用到。
b) 第一个简单的例子
我们先引入如下 js 脚本
<scriptsrc="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAhrsyA85kX5AhsROY61ghERSe1hdFkqvyx4TFycQxSUo39qJRxqmJjnbPYhTiCZ8RbpWQ&sensor=true"type="text/javascript">
</script>
然后为我们的主窗体添加如下事件
- < body onload = "initialize()" onunload = "GUnload()" >
- < div id = "map_canvas" style = "width:500px;height:300px" > </ div >
- </ body >
编写如下函数加载地图到
id
为
map_canvas
的
DIV
中
- function initialize(){
- var map= new GMap2(document.getElementById( "map_canvas" ));
- map.setCenter( new GLatLng(39.9493,116.3975),13);
- }
同时，我们可以设置一些标注点，比如
Point
为一个
GLatLng
类型的对象，
number
为任意字符串
,map
为当前地图。
newGMarker(point)
初始化一个标注点，参数为该点的
GLatLng
，
为该标注点 marker 注册一个 click 事件，当单击该标注点的时候会弹出一个带有箭头的矩形 InfoWindow ，由 map.openInfoWindowHtml(point,myHtml) 函数实现。
在
Googel
地图中，相关的放大或者缩小按钮，视图模式都是由控件标识，添加控件时不指定相应的位置，比如
map.addControl(newGSmallZoomControl());
加入一个放大缩小控件
map.addControl(newGMapTypeControl()); 加入一个地图类型控件，可以切换为卫星视图或者地图视图
GLatLng 表示一个含有经度和纬度的一个类，表示了某个地址在地理信息系统中的唯一位置，下面介绍如何得到某点具体的 GLatLng
打开 google 地图，在 google 地图上查询到绵阳市公安局涪城区分局的具体地址为：四川省绵阳市四川省绵阳市红星街 95 号，在该标注点上点击右键：在此放置居中位置单击地图上分享连接这个按钮
注意红色的地方就是四川省绵阳市四川省绵阳市红星街
95
号在
GIS
中的具体位置
functioninitialize(){
varmap=newGMap2(document.getElementById("map_canvas"));
map.setCenter(newGLatLng( 31.45454 , 104.755626 ),13);
} 更改里面的 GLatLng 就可以得到四川省绵阳市四川省绵阳市红星街 95 号附近的地图
GoogleMap
提供了灵活的
API
接口功能，能让使用者灵活的应用，比如在地图上加上标注
和显示一些与该点有关的信息，比如
这些信息，同时通过
GoogelMap
提供的服务您还可以查阅两点间的行车路线以及步行路线。可以使用如下函数实现：
- function find(start,end){
- map= new GMap2(document.getElementById( "map_canvas" ));
- map.addControl( new GSmallZoomControl());
- map.setCenter( new GLatLng(28.549809,102.177082),9);
- directionsPanel=document.getElementById( "route" );
- directions= new GDirections(map,directionsPanel);
- directions.load( "from:" +start+ "to:" +end,{
- travelMode:G_TRAVEL_MODE_DRIVING
- });
- }
Start 为起始地点， end 为结束地点 ,div:route 用于显示行车路线信息， travelMode 的可选项为 G_TRAVEL_MODE_DRIVING 或者 G_TRAVEL_MODE_WALKING
- GEvent.addListener(marker, "click" , function (){
- var myHtml= "<b>#" +number+ "</b><br/>"
- +message[number-1];
- map.openInfoWindowHtml(point,myHtml);
- });
- function createMarker(point,number,map){
- var marker= new GMarker(point);
- var message=[ "这" , "是" , "个" , "秘密" , "消息" ];
- marker.value=number;
- GEvent.addListener(marker, "click" , function (){
- var myHtml= "<b>#" +number+ "</b><br/>"
- +message[number-1];
- map.openInfoWindowHtml(point,myHtml);
- });
- return marker;
- }
