JS版百度地图API--地图构建

jachinlv

浏览: 3212 次
性别:
来自: 杭州

最近访客更多访客>>

MrChenSJ

pro

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS版百度地图API

js 百度地图

地图的构建非常简单，官方的API文档也写得很清晰，我只做一总结：

一、引入JS ：这个很容易理解，既然是调用JS版的百度地图，肯定得引用外部的JS文件了，而这个文件来自百度的服务器（所以必须得联网，不然就没戏。。），我们以后用到的所有方法都写在这个JS文件当中。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

这里的1.4 为JS版百度地图的版本号，目前最新版本为1.4。（理论上这条语句是可以放在html文件中的任何位置，但是一般人们都放在</head>标签之前，不过我曾看到一本书上说放在</body>前，效率是最高的。）

二、在你的html文件中新建一个<div>容器 ：添加一个id属性（这里为<div id="container"></div>）。这个容器是用来放置百度地图的，地图的大小可以通过调节div的样式实现。

三、新建一个百度地图

<script type="text/javascript">
var map = new BMap.Map("container"); 
// 创建地图实例；（"container"）就是刚才新建的div的id属性值
var point = new BMap.Point(116.404, 39.915); 
// 创建点坐标；这个点是由经度和纬度构成的，点可以随意选取
map.centerAndZoom(point, 15); 
// 初始化地图，设置中心点坐标和地图级别
//map.centerAndZoom("杭州");
//这条语句可以代替上面那一条，系统会自动定位到该城市，城市名可以根据用户需要自己定
//当然，如果这样子写，那就不需新建point点了
</script>

~~~~~~~~~~~~~~~~~~~~~~~~这个是分割线~~~~~~~~~~~~~~~~~~~~~~~~~~

只要这三步，就可以建立一个百度地图web应用。当然，还需要调节样式之类的。

下面是一个完整的HTML文件：（该例子来自百度官网）

<!DOCTYPE html><!--HTML5-->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></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>

js版本非常强大，如果可以有离线地图数据，那就完美了，不过这都属于yy

分享到：

table样式大全

2012-12-14 09:20
浏览 1582
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论