|
目录： 页面预览 准备工作 代码实现 相关链接本文我们使用百度提供的地图API，通过8行代码就可在自己的网页引入百度地图的应用。操作十分便捷，功能又十分强大。 1、页面预览  X很多时候我们希望在自己的页面中嵌入一个地图应用，方便向他人直观地提供自己的位置信息。本文我们利用百度提供的api，在自己的网页中嵌入百度地图的应用。完成后界面预览如上图所示，当然我们这里只关注图中百度地图那一块。 2、准备工作 百度地图 JavaScriptAPI是一套由JavaScript语言编写的应用程序接口，可帮助我们在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。 该套API免费对外开放。自v1.5版本起，需先 申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。 申请秘钥的过程十分简单，如下列出大致过程，首先你要有一个百度账号，切记。 第一步：  点击上文中申请秘钥的链接，然后点击图中的申请秘钥执行下一步 第二步：  如果你还未成为百度开发者，你需要首先称为一名百度开发者，按照步骤完善信息即可。 加载中... 内容加载失败，点击此处重试 加载全文 第三步：  接下来点击创建应用。 第四步：  应用名称填上自己的应用名称就可以了，应用类型可以选择浏览器端，下面的Referer白名单参见下面的说明。我们这里作为学习使用，填写一个英文半角的*就OK了。接下来点击提交。 第五步：  OK，获得秘钥，就是访问应用(AK)下面的那一串序列号。可以先copy下来备用。 3、代码实现 插入百度地图的方法十分简单。 (1)插入JavaScript API (2)插入地图块 (3)插入JS代码创建地图应用 (1)插入JavaScript API 在页面 标签对中引入如下百度地图JS API:特别注意，以上代码中的ak=秘钥处，秘钥即为准备工作中申请的秘钥，对应复制替换秘钥二字即可。 另外为了提高网页的加载速度，我们可以将上述代码放在 标签对中的最后。这样会提升页面的加载速度，但是地图应用的加载时间同样会依赖于以上文件的载入速度。 (2)插入地图块我们只需要在插入地图应用的位置，插入一个div块即可，同时设定一个id供后续使用，方式如下： 这样就可以了。 (3)插入JS代码创建地图应用 在 的末尾插入以下JavaScript代码段： scripttype='text/javascript'> var map = new BMap.Map('baiduMap');//创建Map实例 var point = new BMap.Point(114.419915,30.513719);//创建Point位置实例 map.centerAndZoom(point, 19); //设置地图中心点及缩放级别map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 var marker =new BMap.Marker(point); //创建一个Marker点 map.addOverlay(marker);//将Marker点覆盖到地图上 marker.setAnimation(BMAP_ANIMATION_BOUNCE);//使Marker点跳动起来 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放/script> 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 910 代码第2行创建一个Map实例； 代码第3行创建一个Point位置实例，为了确定自己位置的坐标，可以访问http://api.map.baidu.com/lbsapi/getpoint/index.html在上面确定自己位置的坐标。 代码第4行设定地图的中心点，以及缩放级别，缩放级别会在确定位置坐标的网站上显示，这里采用的是19级。 代码第6~8行，为了更加清晰地指明自己的位置信息，我们在地图上添加一个Marker，同时让它跳动起来。见预览图片，中间红色的Marker指向我们要定位的点，同时会更加醒目地跳动。 代码第9行，开启鼠标滚轮对地图缩放的控制。 至此大功告成。引入百度地图JSAPI，然后通过短短8行代码就可在页面中实现一个百度地图的应用。完整代码如下(只包含地图应用，省略了预览图片中的其他部分)： html lang='zh-CN'>head> meta http-equiv='Content-Type'content='text/html; charset=utf-8' /> meta name='viewport'content='initial-scale=1.0, user-scalable=no' /> style type='text/css'> body,html,#baiduMap {width: 90%;height: 90%;overflow:hidden;margin:0;font-family:'微软雅黑';} style> script type='text/javascript'src='http://api.map.baidu.com/api?v=2.0&ak=你的秘钥'>script> head> body>div id='baiduMap'class='col-md-6'>div>scripttype='text/javascript'> var map = new BMap.Map('baiduMap');//创建Map实例 var point = new BMap.Point(114.419915,30.513719);//创建point位置 map.centerAndZoom(point, 19); //设置地图中心点及缩放级别map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 var marker =new BMap.Marker(point); //创建一个Marker点 map.addOverlay(marker);//将Marker点覆盖到地图上 marker.setAnimation(BMAP_ANIMATION_BOUNCE);//使Marker点跳动起来 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放script> body> html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2122 23 24 25 26 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2021 22 23 24 25 26将以上代码复制到html页面中双击运行就行了。注意，要将以上代码中相应的位置填入你自己的秘钥！
另外需要特别说明的一点是，如果没有给地图指定高度，可能不会在页面中显示，所以最好手动设置地图的高度。
4、相关链接我们这里仅仅使用了百度地图api的一小部分，实际上其功能十分强大。比如GPS定位功能，全景地图功能，个性化地图设置等功能。 |
