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

百度地图开发

时间:2020-01-15 11:38:37      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:info   rand   int   image   微信小程序   viewport   baidu   右上角   type   

百度地图开始是中国人自己制作的文档和微信小程序一样,都是中文的对我来说真是福音,文档页通俗易懂。

下面就来看看百度地方开发是怎么操作的吧

官方网站就贴出来了http://lbsyun.baidu.com/

在网页导航栏开发文档里Wed开发 java Script API 里有详细介绍。

 

效果图

技术图片

话不多说上代码

 

<!DOCTYPE html>
<html>

<head>

    <title>Hello, World</title>
    <style type="text/css">
        html {
            height: 100%
        }
        
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        
        #container {
            height: 100%
        }
    </style>
  
<!-- 这一块是开发密钥需要自己注册 -->
    <script src="http://api.map.baidu.com/api?v=3.0&ak= btAZ21QoB2Tov4yFzAAcutTZd4ZbQ3j">
    </script>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript">
        // 创建地图实例 
        var map = new BMap.Map("container");

        // 创建点坐标 
        //这里是北京天安门的坐标所以一开始定位的地方
        var point = new BMap.Point(116.404, 39.915);

        // 初始化地图,设置中心点坐标和地图级别  
        map.centerAndZoom(point, 15);
    </script>
</body>

</html>

 

 

接下来加深一下

技术图片

 

 以下是图片的代码注释都写的狠详细了

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <!-- 下面我们添加一个meta标签,以便使您的页面更好的在移动平台上展示。 -->
 5     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
 6     <meta charset="UTF-8">
 7     <title>Document</title>
 8     <style type="text/css">
 9       html{
10           height:100%;
11       }
12       body{
13           height:100%; 
14           margin:0px; 
15           padding:0px;
16       }
17       /*注意这里如果不设置容器的样式无法显示出来*/
18       #container{
19           height: 100%
20       }
21 
22 
23     </style>
24     <!-- 引用百度地图API文件  这里需要自己注册密钥不然无法使用-->
25     <script  src="http://api.map.baidu.com/api?v=3.0&ak=btAZ21QoB2Tov4yFzAAcutTZd4ZbQ3j"></script>
26 </head>
27 <body>
28 <!-- 创建地图容器元素 -->
29     <div id="container"></div>
30     <script>
31     // 位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
32      var miap = new BMap.Map("container");
33      // 设置中心点坐标 坐标设置为自己坐标也可以设置其他坐标
34      var point = new BMap.Point(114.410968,30.482142);
35      // 地图初始化,同时设置地图展示级别
36      miap.centerAndZoom(point,20);
37      // 至此,就快速创建了一张以自己的位置为中心的地图~ 
38      // 开启鼠标滚轮缩放地图的鼠标滚轮缩放默认是关闭的,需要配置开启。
39      miap.enableScrollWheelZoom(true);//开启鼠标滚轮缩放 用来展示地图
40      //这里添加一些控件 
41      
42      //控件还有一些控件的控制属性
43      miap.addControl(new BMap.NavigationControl());//这个是缩放加左右平移的API。
44        miap.addControl(new BMap.ScaleControl()); //这个是地图左下角,尺的控件。    
45        miap.addControl(new BMap.MapTypeControl());//这个代表右上角卫星地图和三维地图
46 
47 
48     </script>
49 </body>
50 </html>

百度地图开发

标签:info   rand   int   image   微信小程序   viewport   baidu   右上角   type   

原文地址:https://www.cnblogs.com/jiangquhan/p/12195532.html

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