百度地图API入门2-创建一个简单的百度地图

    有了baidu key,我们就可以做应用了。
第一个demo代码如下:

<!DOCTYPE html> <!-- HTML 5声明 -->
<html>  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 编码格式声明 -->
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  <!-- 缩放调整设置,移动平台用 -->
    <title>map</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=3.0&amp;ak=yourkey"></script><!-- 引用百度地图API文件 -->
  </head>  
  <body>
    <div id="container"></div>	 <!-- 创建地图容器元素 --> 
	<script type="text/javascript">
		// 百度地图API功能
		var map = new BMap.Map("container");    // 创建地图实例
		map.centerAndZoom(new BMap.Point(104.088603,30.656067), 15);  // 初始化地图,设置中心点坐标(经度和纬度)和地图级别
		//添加地图类型控件
		map.addControl(new BMap.MapTypeControl({
			mapTypes:[
				BMAP_NORMAL_MAP,
				BMAP_HYBRID_MAP
			]}));	  
		map.setCurrentCity("成都");          // 设置地图显示的城市
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	</script>
  </body>
</html>

只需要把yourkey填写为你申请的key即可运行了。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页