码迷,mamicode.com
首页 > 其他好文 > 详细

Google map 入门

时间:2019-11-22 13:48:13      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:dream   申请   idt   onload   rip   css   body   oom   api   

 

 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 入门

标签:dream   申请   idt   onload   rip   css   body   oom   api   

原文地址:https://www.cnblogs.com/lyr597emm/p/8902014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!