最近研究了一下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自己实现...