Google maps API开发(一) .
2012-07-17 14:12
405 查看
写的不错,收藏了,向前辈致敬!
原贴地址:/article/5872527.html
一、加载Google maps API
您可以到http://code.google.com/intl/zh-CN/apis/maps/signup.html注册申请自己的API
二、加载简单的Google地图
1、 加载Google地图
2、 添加一个创建GMarker的方法
这样一个简单的HelloWorld就显示出来了
通过这个例子我们可以了解到GMap2、GMarker、GIcon这几个核心类的基本应用
最后看看我截得图:
源文件下载
这几天整理了一下V3的版本,V3相比V2还是有很大进步的,比如烦人的api引用,发布的时候非常不爽;清爽的api对象,比以前精简不少对象,但是功能却没有打折扣……还有很多等着我们去挖掘,总之是
用的非常爽,废话不多说了,实现同样的功能V3的代码如下:
原贴地址:/article/5872527.html
一、加载Google maps API
<script type="text/javascript" src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>
您可以到http://code.google.com/intl/zh-CN/apis/maps/signup.html注册申请自己的API
二、加载简单的Google地图
1、 加载Google地图
//声明一个GMap2全局变量 var map; function load() { //检查浏览器的兼容性. if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); //加载地图 map.addControl(new GLargeMapControl()); //增加全功能控件 map.addControl(new GMapTypeControl()); //设置地图类型 map.enableScrollWheelZoom(); //设置地图支持滚轮 map.setCenter(new GLatLng(39.990168, 116.295304), 10); //设置地图的中心坐标 map.enableDoubleClickZoom(); //开启双击google map会自动放大. map.enableScrollWheelZoom(); //开启滚动鼠标自动放大和缩小. // } }
2、 添加一个创建GMarker的方法
function createMarker(baseIcon, point, html) { var icon = new GIcon(baseIcon); var marker = new GMarker(point, icon); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; } 3、 调用这个GMarker方法 var icon = new GIcon(G_DEFAULT_ICON); var point = new GPoint(116.429114, 39.934322); var html = '<div ><font color="blue">HelloWorld!</font></div>'; var marker = createMarker(icon, point, html); map.addOverlay(marker);
这样一个简单的HelloWorld就显示出来了
通过这个例子我们可以了解到GMap2、GMarker、GIcon这几个核心类的基本应用
最后看看我截得图:
源文件下载
这几天整理了一下V3的版本,V3相比V2还是有很大进步的,比如烦人的api引用,发布的时候非常不爽;清爽的api对象,比以前精简不少对象,但是功能却没有打折扣……还有很多等着我们去挖掘,总之是
用的非常爽,废话不多说了,实现同样的功能V3的代码如下:
<html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; function load() { var myLatlng = new google.maps.LatLng(39.934322, 116.429114); var myOptions = { //这里的参数可以为多个参数,具体参考MapOptions对象 zoom: 5, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), myOptions); var marker = new google.maps.Marker({ //可以为多个参数,具体参考MarkerOptions对象 map: map, position: myLatlng }); google.maps.event.addListener(marker, 'click', function(event) { //这里的infoWindow的参数可以为多个对象,具体可以参考InfoWindowOptions对象 var html = '<div ><font color="blue">HelloWorld!</font></div>'; var infowindow = new google.maps.InfoWindow({ content: html }); infowindow.open(map, marker); }); } </script> </head> <body onload="load()"> <table border="2" id="table1" bordercolor="#FF0000"> <tr> <td> <div id="map" style="width:800px; height:480px"></div> </td> </tr> </table> </body> </html>
相关文章推荐
- Google Maps Api应用开发实例精选
- Android Map开发之Google Maps API申请和没有google Api的解决办法
- Google maps API开发(一)(转)
- Google Maps Data API-java开发指南
- Google Maps API离线开发包(没有网络也可以开发Gmap了)
- Google+API开发详解:Google+Maps与Google+Earth双剑合璧
- 申请google Maps API key(用于开发和debug)
- api工程IOS学习:在IOS开发中使用GoogleMaps SDK
- Google Maps API离线开发包
- 基于Google Maps API的地图应用开发
- Google maps API开发(二) .
- Google Maps API 2.0解析(13-支持以前1.0版本的GMap)
- iphone 开发 googleMap api
- 国内使用Google Maps JavaScript API
- Google地图开发密钥Api key
- Google Maps API 2 中文文档
- Google Maps API Documentation
- Google Maps API 2.0解析(5-GPoint GSize GBounds)
- Google Maps API for Android 指南(一)
- Google Maps API:自定义Marker图标,为图标添加文字等信息