Google 地图 API 初级使用

关于Google Map API的使用说明

1.Google Map API介绍

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在加载google map对应的js的时候需要用到。

b) 第一个简单的例子

我们先引入如下js脚本

<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAhrsyA85kX5AhsROY61ghERSe1hdFkqvyx4TFycQxSUo39qJRxqmJjnbPYhTiCZ8RbpWQ&sensor=true" type="text/javascript">

</script>

然后为我们的主窗体添加如下事件
view plaincopy to clipboardprint?

   1. <body onload="initialize()" onunload="GUnload()">  
   2.   
   3. <div id="map_canvas" style="width:500px;height: 300px"></div>  
   4.   
   5. </body>  

<body onload="initialize()" onunload="GUnload()"> <div id="map_canvas" style="width:500px;height: 300px"></div> </body>

 

编写如下函数加载地图到id为map_canvas的DIV中
view plaincopy to clipboardprint?

   1. function initialize() {  
   2.   
   3. var map = new GMap2(document.getElementByIdx("map_canvas"));  
   4.   
   5. map.setCenter(new GLatLng(39.9493, 116.3975), 13);  
   6.   
   7. }  

function initialize() { var map = new GMap2(document.getElementByIdx("map_canvas")); map.setCenter(new GLatLng(39.9493, 116.3975), 13); }

同时，我们可以设置一些标注点，比如

 

 

 
view plaincopy to clipboardprint?

   1. function createMarker(point, number,map) {  
   2.   
   3. var marker = new GMarker(point);  
   4.   
   5. var message = [ "这", "是", "个", "秘密", "消息" ];  
   6.   
   7. marker.value = number;  
   8.   
   9. GEvent.addListener(marker, "click", function() {  
  10.   
  11. var myHtml = "<b>#" + number + "</b><br/>"  
  12.   
  13. + message[number - 1];  
  14.   
  15. map.openInfoWindowHtml(point, myHtml);  
  16.   
  17. });  
  18. return marker;  
  19.   
  20. }  

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

 

Point 为一个GLatLng类型的对象，number为任意字符串,map为当前地图。new GMarker(point)初始化一个标注点，参数为该点的GLatLng，
view plaincopy to clipboardprint?

   1. GEvent.addListener(marker, "click", function() {  
   2.   
   3. var myHtml = "<b>#" + number + "</b><br/>"  
   4.   
   5. + message[number - 1];  
   6.   
   7. map.openInfoWindowHtml(point, myHtml);  
   8.   
   9. });  

GEvent.addListener(marker, "click", function() { var myHtml = "<b>#" + number + "</b><br/>" + message[number - 1]; map.openInfoWindowHtml(point, myHtml); });

 

为该标注点marker注册一个click事件，当单击该标注点的时候会弹出一个带有箭头的矩形InfoWindow，由map.openInfoWindowHtml(point, myHtml)函数实现。

 

在Googel地图中，相关的放大或者缩小按钮，视图模式都是由控件标识，添加控件时不指定相应的位置，比如
map.addControl(new GSmallZoomControl()); 加入一个放大缩小控件

map.addControl(new GMapTypeControl());加入一个地图类型控件，可以切换为卫星视图或者地图视图

 

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中的具体位置
function initialize() {

var map = new GMap2(document.getElementByIdx("map_canvas"));

map.setCenter(new GLatLng(31.45454, 104.755626), 13);

} 更改里面的GLatLng就可以得到四川省绵阳市四川省绵阳市红星街95号附近的地图

 

 

Google Map提供了灵活的API接口功能，能让使用者灵活的应用，比如在地图上加上标注
     和显示一些与该点有关的信息，比如这些信息，同时通过Googel Map 提供的服务您还可以查阅两点间的行车路线以及步行路线。可以使用如下函数实现：
view plaincopy to clipboardprint?

   1. function find(start, end) {  
   2.   
   3. map = new GMap2(document.getElementByIdx("map_canvas"));  
   4.   
   5. map.addControl(new GSmallZoomControl());  
   6.   
   7. map.setCenter(new GLatLng(28.549809, 102.177082), 9);  
   8.   
   9. directionsPanel = document.getElementByIdx("route");  
  10.   
  11. directions = new GDirections(map, directionsPanel);  
  12.   
  13. directions.load("from: " + start + "  to: " + end, {  
  14.   
  15. travelMode : G_TRAVEL_MODE_DRIVING  
  16.   
  17. });  
  18.   
  19. }  

function find(start, end) { map = new GMap2(document.getElementByIdx("map_canvas")); map.addControl(new GSmallZoomControl()); map.setCenter(new GLatLng(28.549809, 102.177082), 9); directionsPanel = document.getElementByIdx("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
posted @ 2011-03-09 09:01 程序新青年阅读(944) 评论(0) 编辑收藏举报
会员力量，点亮园子希望
刷新页面返回顶部
忆昔

青春匆匆

Google 地图 API 初级使用

公告
