初识 GoogleMap
GoogleMap的文档写的相当好,照着做基本上没什么问题,就当记事本了。
View Code
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <title>Hello World</title>
5 <style type="text/css">
6 html{height:100%}
7 body{height:100%;margin:0px;padding:0px}
8 #map_canvas{height:100%}
9 </style>
10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
11 </script>
12 <script type="text/javascript">
13 function initialize(){
14 var latlng=new google.maps.LatLng(-34.37,150.644);
15 var myOptions={
16 zoom:12,
17 center:latlng,
18 mapTypeId:google.maps.MapTypeId.ROADMAP
19 };
20 var map=new google.maps.Map(document.getElementById("map_canvas"),myOptions);
21 }
22 </script>
23 </head>
24
25 <body onload="initialize()">
26 <div id="map_canvas" style="width:100% ;height:100%"></div>
27 </body>
28 </html>
2 <html>
3 <head>
4 <title>Hello World</title>
5 <style type="text/css">
6 html{height:100%}
7 body{height:100%;margin:0px;padding:0px}
8 #map_canvas{height:100%}
9 </style>
10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
11 </script>
12 <script type="text/javascript">
13 function initialize(){
14 var latlng=new google.maps.LatLng(-34.37,150.644);
15 var myOptions={
16 zoom:12,
17 center:latlng,
18 mapTypeId:google.maps.MapTypeId.ROADMAP
19 };
20 var map=new google.maps.Map(document.getElementById("map_canvas"),myOptions);
21 }
22 </script>
23 </head>
24
25 <body onload="initialize()">
26 <div id="map_canvas" style="width:100% ;height:100%"></div>
27 </body>
28 </html>
1:当然要引入Google Map API .
2:创建LatLng对象,这是最重要的,包含经纬度,Google就是通过它来定位的。
3:创建Map Options,包括zoom(地图的放大倍数1-15),center(包含经纬度的对象),mapTypeId(地图类型:包括
ROADMAP
displays the normal, default 2D tiles of Google Maps.SATELLITE
displays photographic tiles.HYBRID
displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).TERRAIN
displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).
4:创建Map对象。