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

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

内容来自17jquery

17jquery.com

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

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

内容来自17jquery

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

三、新建一个百度地图

内容来自17jquery

<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> 一起jquery,17jquery ~~~~~~~~~~~~~~~~~~~~~~~~这个是分割线~~~~~~~~~~~~~~~~~~~~~~~~~~ 内容来自17jquery

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

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

<!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>

下面是我学习中用到的网站：

http://developer.baidu.com/map/jsdevelop-1.htm
http://developer.baidu.com/map/js-download.htm
http://developer.baidu.com/map/static/doc/Reference_of_Baidu_JavaScript_API_v1.4.pdf

转载请注明出处，尊重原创。http://www.cnblogs.com/jianrong-zheng/。谢谢

JS版百度地图API的更多相关文章

  1. JS调用百度地图API标记地点

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. js调用百度地图API创建地图，搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  3. js调用百度地图api

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">   ...

  4. JS使用百度地图API

    尚未整理: <script type="text/javascript"> var map = new BMap.Map("dituContent" ...

  5. js调用百度地图API创建地图

    技术交流群:233513714 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="serv ...

  6. JS通过百度地图API获取当前定位信息

    $(function(){ var latlon=null; //ajax获取用户所在经纬度 $.ajax({ url:"http://api.map.baidu.com/location/ ...

  7. Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

    (从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...

  8. 关于百度地图API （持续跟新）

    一.初始化地图显示不在正中间,出现偏移 问题描述与解决办法: 代码: body, html, #allmap { width: 100%; height: 100%; overflow: hidden ...

  9. 【百度地图API】JS版本的常见问题

    1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...

随机推荐

  1. HDU 2586 LCA

    题目大意: 多点形成一棵树,树上边有权值,给出一堆询问,求出每个询问中两个点的距离 这里求两个点的距离可以直接理解为求出两个点到根节点的权值之和,再减去2倍的最近公共祖先到根节点的距离 这是自己第一道 ...

  2. Linux的三种特殊权限

    1.Suid Set位权限 ●对文件以文件的拥有者身份执行文件 ●对目录无影响 权限设置: ●suid=u+s 2.Sgid Set位权限 ●对文件以文件的组身份执行文件 ●对目录在目录中最新创建的文 ...

  3. 使用Myeclipse创建自定义签名debug keystore

    1.在已经创建后的android项目上右击鼠标,如图所示 2.选择next下一步 3.选择create new keystore 注意  这里密码要输入android 4.点击next,录入基本信息 ...

  4. JDK的下载与安装

    一.下载 在Oracle公司的官方网站(www.oracle.com)下载. 二.安装 1.双击运行JDK程序,弹出JDK安装导向窗口,点击“下一步” 2.点击“更改",将安装地址修改为 C ...

  5. 国内android帮助文档镜像网站---http://wear.techbrood.com/develop/index.html

    http://wear.techbrood.com/develop/index.html

  6. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  7. POJ 2752 - Seek the Name, Seek the Fame （KMP）

    题意:给一个字符串s,问s的某个前缀与后缀相同的情况时,长度是多少. 此题使用KMP的next数组解决. next数组中,j=next[i],next[i]表示S[0...i-1]的某个后缀(字符串S ...

  8. 2013 imac 安装 win7

    昨天晚上安装imac win7系统,其实步骤是很简单的,首先需要一个用boot camp助手做好的win7安装U盘或者有个外接光驱加一张win7光盘,然后用boot camp助理划分一个分区给win7 ...

  9. 如何调用super

    因此,决定是否调用 super,基于您打算如何重新实施方法: 如果打算补充超类实现的行为,请调用 super. 如果打算替换超类实现的行为,就不要调用 super. 如果您要补充超类行为,另一个需要重 ...

  10. 层次分析模型（AHP）及其MATLAB实现

    今天用将近一天的时间学习了层次分析模型(AHP),主要参考了一份pdf,这个网站,和暨南大学章老师的课件,现写出一些自己总结的要点. 一.层次分析法的基本步骤: 角度一: 实际问题——分解——> ...