百度mapAPI-HelloWorld

百度地图API--HelloWorld

百度地图API--Hello World

这里引用一个经典的单词"Hello World"，这个词是程序界所有人都很熟悉的，我在开始学习Java的时候就是从这开始的，什么编写一个Hello World程序，甚至有的面试题中有“写一个输出Hello World的程序”来测试面试者的面向对象的思维。下面，也从Hello World来引入百度地图API的开发。

先看一段代码：

<!DOCTYPE html>
<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>
<!-- //此为v1.4版本及以前版本的引用方式
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> -->
<!-- //此为v1.5版本以后的引用方式 //-->
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=fw4DkI8ZoN3UZsUc5fkkBOQc"></script> 
<script type="text/javascript">
	function load() {
		// BMap是百度地图API的命名空间，所有的类都在这里面
		var map = new BMap.Map("container"); // 创建一个Map对象
		var point = new BMap.Point(116.404, 39.915); // 创建一个点对象
		map.centerAndZoom(point, 15);
		// 两秒钟后移动到中心点
		window.setTimeout(function() {
			map.panTo(new BMap.Point(116.415, 39.918));
		}, 2000);
	}
</script>
</head>
<body onload="load()">
	<div id="container"></div>
</body>
</html>

有过web开发经验的对这个代码都很熟悉了，这里用的是JSP，针对这个Hello World做出如下简要介绍：

1.准备一个页面，分配一个div用于展示地图区域，给div设置css样式：

页面：<div id="container"></div>
样式：<style type="text/css">
          html {height: 100%} 
          body {height: 100%;margin: 0px;padding: 0px}
          #container {height: 100%}
      </style>

2.引用百度地图API：

使用V1.4及以前版本的引用方式：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>  
使用V1.5版本以后的引用方式：
<script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>

3.创建地图实例并展示，关注load方法，这个方法在页面加载的时候调用：

<script type="text/javascript">
	function load() {
		// BMap是百度地图API的命名空间，所有的类都在这里面
		var map = new BMap.Map("container");
		var point = new BMap.Point(116.4035, 39.915); // 创建点左边
		map.centerAndZoom(point, 15); // 初始化地图
		
		// 两秒钟后移动到中心点
		window.setTimeout(function() {
			map.panTo(createPoint(116.415, 39.918));
			map.setZoom(7);
		}, 2000);
	}
</script>

注释：BMap是一个命民空间，Map类在这个命名空间内，相当于Java中的package。

百度地图API调用起来很简单，开发者只需要写少量代码就能实现诸多功能。

百度mapAPI-HelloWorld

相关推荐