百度地图简单调用

 
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8     <!--Baidu map Start-->
 9       <div class="baidu-map-area section-padding" id="map" style="width: 100%; height: 100%;"></div>
10       <!--引用百度地图API-->
11       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申请的百度地图api秘钥"></script>
12       <script type="text/javascript">
13       //创建和初始化地图函数：
14       function initMap(){
15         createMap();//创建地图
16         setMapEvent();//设置地图事件
17         addMapControl();//向地图添加控件
18         addMapOverlay();//向地图添加覆盖物
19       }
20       function createMap(){ 
21         map = new BMap.Map("map"); 
22         map.centerAndZoom(new BMap.Point(116.302042,39.908469),16);
23       }
24     
25       function setMapEvent(){
26         map.enableScrollWheelZoom();
27         map.enableKeyboard();
28         map.enableDragging();
29         map.enableDoubleClickZoom()
30       }
31       function addClickHandler(target,window){
32         target.addEventListener("click",function(){
33           target.openInfoWindow(window);
34         });
35       }
36       function addMapOverlay(){
37       }
38       //向地图添加控件
39       function addMapControl(){
40         var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
41         map.addControl(navControl);
42         
43         
44         var point = new BMap.Point(116.302042,39.908469); //将标注点转化成地图上的点
45         var marker = new BMap.Marker(point); //将点转化成标注点
46         map.addOverlay(marker);  //将标注点添加到地图上
47         
48       }
49      
50       
51       var map;
52         initMap();
53     </script>
54       <!--Baidu map End-->
55     </body>
56 </html>

 

 

复制出来就可以查看地图

posted @ 2020-12-04 16:35  伊人兮明眸秋水  阅读(176)  评论(0)  编辑  收藏  举报