原文引自: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>
然后为我们的主窗体添加如下事件
- <bodyonload="initialize()"onunload="GUnload()">
- <divid="map_canvas"style="width:500px;height:300px"></div>
- </body>
编写如下函数加载地图到id为map_canvas的DIV中
- functioninitialize(){
- varmap=newGMap2(document.getElementById("map_canvas"));
- map.setCenter(newGLatLng(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号,在该标注点上点击右键:在此放置居中位置单击地图上分享连接这个按钮
分析第一个地址
http://ditu.google.cn/maps?f=q&source=s_q&hl=zh-CN&geocode=&q=%E5%9B%9B%E5%B7%9D%E7%9C%81%E7%BB%B5%E9%98%B3%E5%B8%82%E5%9B%9B%E5%B7%9D%E7%9C%81%E7%BB%B5%E9%98%B3%E5%B8%82%E7%BA%A2%E6%98%9F%E8%A1%9795%E5%8F%B7&sll=31.454527,104.755797&sspn=0.019037,0.032015&brcurrent=3,0x36f19f6075de254f:0xb07672e7bcd23382,0,0x36f141eb87c896a1:0x2d9e6913011d7e82%3B5,0,0&ie=UTF8&hq=%E7%BB%B5%E9%98%B3%E5%B8%82%E5%85%AC%E5%AE%89%E5%B1%80%E6%B6%AA%E5%9F%8E%E5%8C%BA%E5%88%86%E5%B1%80&hnear=%E5%9B%9B%E5%B7%9D%E7%9C%81%E7%BB%B5%E9%98%B3%E5%B8%82%E6%B6%AA%E5%9F%8E%E5%8C%BA%E7%BA%A2%E6%98%9F%E8%A1%9795%E5%8F%B7%E7%BB%B5%E9%98%B3%E5%B8%82%E5%85%AC%E5%AE%89%E5%B1%80%E6%B6%AA%E5%9F%8E%E5%8C%BA%E5%88%86%E5%B1%80&filter=0&update=1&ll=31.45454,104.755626&spn=0.002306,0.003079&z=18&iwloc=A
注意红色的地方就是四川省绵阳市四川省绵阳市红星街95号在GIS中的具体位置
functioninitialize(){
varmap=newGMap2(document.getElementById("map_canvas"));
map.setCenter(newGLatLng(31.45454,104.755626),13);
}更改里面的GLatLng就可以得到四川省绵阳市四川省绵阳市红星街95号附近的地图
GoogleMap提供了灵活的API接口功能,能让使用者灵活的应用,比如在地图上加上标注
和显示一些与该点有关的信息,比如这些信息,同时通过GoogelMap提供的服务您还可以查阅两点间的行车路线以及步行路线。可以使用如下函数实现:
- functionfind(start,end){
- map=newGMap2(document.getElementById("map_canvas"));
- map.addControl(newGSmallZoomControl());
- map.setCenter(newGLatLng(28.549809,102.177082),9);
- directionsPanel=document.getElementById("route");
- directions=newGDirections(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(){
- varmyHtml="<b>#"+number+"</b><br/>"
- +message[number-1];
- map.openInfoWindowHtml(point,myHtml);
- });
- functioncreateMarker(point,number,map){
- varmarker=newGMarker(point);
- varmessage=["这","是","个","秘密","消息"];
- marker.value=number;
- GEvent.addListener(marker,"click",function(){
- varmyHtml="<b>#"+number+"</b><br/>"
- +message[number-1];
- map.openInfoWindowHtml(point,myHtml);
- });
- returnmarker;
- }