当前位置: 代码迷 >> Web前端 >> 怎么使用Google Map API
  详细解决方案

怎么使用Google Map API

热度:178   发布时间:2012-09-22 21:54:54.0
如何使用Google Map API
最近研究了一下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&amp;hq=&amp;hnear=%E4%B8%8A%E6%B5%B7%E5%B8%82&amp;ll=31.601931,121.473083&amp;spn=1.242132,2.705383&amp;t=h&amp;z=9&amp;brcurrent=3,0x35b27040b1f53c33:0x295129423c364a1,1%3B5,0,1&amp;output=embed"></iframe><br /><small><a href="http://ditu.google.cn/?ie=UTF8&amp;hq=&amp;hnear=%E4%B8%8A%E6%B5%B7%E5%B8%82&amp;ll=31.601931,121.473083&amp;spn=1.242132,2.705383&amp;t=h&amp;z=9&amp;brcurrent=3,0x35b27040b1f53c33:0x295129423c364a1,1%3B5,0,1&amp;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&amp;v=2&amp;sensor=true_or_false&amp;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自己实现...

  相关解决方案