一个简单的地图实现

创建一个地图的步骤：

 1、HTML生命为<!DOCTYPE >

2、引入百度的jjs的ap：<script type="text/javascript" src="http://api.map.baidu.com/api?key=79d13dd2c1076b1ad827484228ee4dea&v=1.1&services=true" ></script>

3、声明地图在哪个id下(不设置大小不显示)：

<style type="text/css">
#container{
height:500px;
width: 500px;
}
</style>
View Code

4、在body中写一个div，id为上述的id名称。

5、在div之外，写一个js代码：

1 var map = new BMap.Map("id名称");//创建一个放置地图的容器
2 var point = new BMap.Point(116.404, 39.915)//定位
3 map.centerAndZoom(point,11);//11位地图显示级别

完整的代码：

 1 <!DOCTYPE >
 2 <html>
 3 
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6         <title>地图初级</title>
 7         <script type="text/javascript" src="http://api.map.baidu.com/api?key=79d13dd2c1076b1ad827484228ee4dea&v=1.1&services=true"></script>
 8         <style type="text/css">
 9             #container {
10                 height: 500px;
11                 width: 500px;
12             }
13         </style>
14     </head>
15 
16     <body>
17         <div id="container"></div>
18         <script type="text/javascript">
19             /*
20              * 在container容器中创建一个地图，参数container为div的id属性
21              */
22             var map = new BMap.Map("container");
23             /**
24              * 定位
25              */
26             var point = new BMap.Point(116.404, 39.915);
27             /**
28              * 将point移动到浏览器中心，并且地图级别调整为15；
29              */
30             map.centerAndZoom(point, 11);
31         </script>
32     </body>
33 
34 </html>

 

posted @ 2018-02-06 22:02  风中之烛_清  阅读(546)  评论(0)  编辑  收藏  举报