如何使用Google Map API

xudongcsharp

浏览: 477212 次
性别:
来自: 上海

最近访客更多访客>>

fbswz1111

chenmo80125

jelly25176

Cadelle

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

最近研究了一下Google Map的使用方法，发现有两种常见的用法，总结一下，以后查起来方便！

一、调用Google团队封装好的地址，简单方便
有一种方法比较简单，进去google的地图页面http://ditu.google.cn/，然后输入目的地址，然后右面有一个分享的链接，点击获取HTML代码，你会得到譬如
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://ditu.google.cn/?ie=UTF8&hq=&hnear=%E4%B8%8A%E6%B5%B7%E5%B8%82&ll=31.601931,121.473083&spn=1.242132,2.705383&t=h&z=9&brcurrent=3,0x35b27040b1f53c33:0x295129423c364a1,1%3B5,0,1&output=embed"></iframe><br /><small><a href="http://ditu.google.cn/?ie=UTF8&hq=&hnear=%E4%B8%8A%E6%B5%B7%E5%B8%82&ll=31.601931,121.473083&spn=1.242132,2.705383&t=h&z=9&brcurrent=3,0x35b27040b1f53c33:0x295129423c364a1,1%3B5,0,1&source=embed" style="color:#0000FF;text-align:left">查看大图</a></small>的代码，
直接把代码黏贴到你页面中，不需要调用任何JS函数，简单吧！

二、调用官方API
http://code.google.com/intl/zh-CN/apis/maps/index.html
根据自己的需求选择不同的API，这里我选用的是第一种Google Maps JavaScript API，进入开发指南后，根据辅导手册我们能得到一下代码
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAASxpUwpTIsah0HhFUu4CeXxTRPPg-t4qZV_Pkpf2GWNHxovB6dBSVLQqrNTBL8D2ww-FLdM4esrG8IQ" type="text/javascript">

<head>
       <script type="text/javascript">
	function initialize() {
	  var map = new GMap2(document.getElementById("map_canvas"));
          //加控件
	  map.addControl(new GSmallMapControl());
	  map.addControl(new GMapTypeControl());
	  
	  map.setCenter(new GLatLng(31.188523, 121.436526), 13);
	  // Add 10 markers to the map at random locations
	  var bounds = map.getBounds();
	  var southWest = bounds.getSouthWest();
	  var northEast = bounds.getNorthEast();
	  var lngSpan = northEast.lng() - southWest.lng();
	  var latSpan = northEast.lat() - southWest.lat();
	  var point = new GLatLng(31.182385,121.439223);
	  map.addOverlay(new GMarker(point));
	}
	</script>
  </head>
  
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>

*三、调用中文参数函数Geocoder

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">   
	      var geocoder;//地图生成类
		  var map;//地图
		  var oldInfoWindow;
		  /*初始化地图*/
		  function initialize() {
		    geocoder = new google.maps.Geocoder();
		 	geocoder.geocode( { 'address': '上海市长宁区仙霞路317号远东国际广场B2403-2407室'}, function(results, status) {
			      if (status == google.maps.GeocoderStatus.OK) {
			        var myOptions = {
					      zoom: 14,
					      center: results[0].geometry.location,
			      		  mapTypeId: google.maps.MapTypeId.ROADMAP 
		      		}
				    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
				    var	newMarker = new google.maps.Marker({
					position: results[0].geometry.location,
					title:'日清纺织(上海)有限公司',
					map:map
					});	        
			      } else {
			         alert("错误状态" + status);
			      }
			});
		}
</script>
 </head>

 <body onLoad="initialize();">
    <div id="map_canvas" style="height: 305px; width: 330px;"></div>
 </body>
</html>

注：
1.在http://code.google.com/intl/zh-CN/apis/maps/signup.html为你的url注册自己站内的一个key
2.map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());是在地图上家一些控件，可以参考控件API自己改写！
3. map.setCenter(new GLatLng(31.188523, 121.436526), 13);参数经度纬度可以换成自己的，参数可以在地图上获取
4. var point = new GLatLng(31.182385,121.439223);这个是标注你的目的地

这只是简单实现，具体可以根据API自己实现...

分享到：

java 图片加水印 | kaptcha开源验证码

2011-07-05 14:37
浏览 3266
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论