Google map 入门

Posted lyr597emm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google map 入门相关的知识,希望对你有一定的参考价值。

 

 1 <!DOCTYPE html>
 2 <html>
 3      <head>  
 4     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
 5     <style type="text/css">  
 6       html { height: 100% }  
 7       body { height: 50%; margin: 0; padding: 0 }  
 8       #map_canvas { height:100% ;width: 100%;}  
 9     </style>  
10   </head>  
11     <body onload="initialize()"> 
12                 <div id="map_canvas" ></div> 
13         
14  </body>   
15     <script type="text/javascript">  
16       function initialize() {  
17         var mapOptions = {  
18           center: new google.maps.LatLng(39.92, 116.46),  //(纬度,经度)
19           zoom: 8,  
20           mapTypeId: google.maps.MapTypeId.ROADMAP  
21         };  
22         var map = new google.maps.Map(document.getElementById("map_canvas"),  
23             mapOptions);  
24         var marker = new google.maps.Marker({
25     map: map,
26     position: new google.maps.LatLng(39.92, 116.46)//经纬度标志
27 });
28 var marker = new google.maps.Marker({
29   position:  new google.maps.LatLng(39.92, 116.00),
30   map: map
31 });
32       }  
33     </script>  
34   <script src=‘http://maps.google.cn/maps/api/js?key=yourkey‘ type="text/javascript"></script>
35 </html>

 

 

技术图片

技术图片

然后需要去申请一个KEY则可使用

<script src=‘http://maps.google.cn/maps/api/js?key=AIzaSyBmuSXd8tkRcDGtWW_OixCOp_sUpJKcdDc‘ type="text/javascript"></script>

 

以上是关于Google map 入门的主要内容,如果未能解决你的问题,请参考以下文章

在片段中添加 Google Maps API V2

google-map 片段应用程序在模拟器中崩溃后打开 WebView 活动

ID、标签 null 或父 ID 与 com.google.android.gms.maps.MapFragment 的另一个片段重复

在 ViewPager 片段中使用 Google Map V2 崩溃?

在 Fragment 中恢复 Google Maps 状态

如何在 Fragment 中获取 Google Maps 对象