因为项目的需求,第一次接触了百度API。

第一步:引用百度地图API的脚本

  如果在局域网环境中,要把地图文件和js文件都要下载下来

  

<script type="text/javascript"  src="http://api.map.baidu.com/api?key=*****************&v=1.0&services=false"></script>

  这个要去百度开发者中心申请KEY

第二步:建立一个你随便取名的div来放地图

<div style="width: 520px; height: 340px; border: 1px solid gray" id="container"></div>

第三步:使用百度地图API来构建地图

//初始化地图,把地图放在第二步的div中
var map = new BMap.Map("container");
//依据经纬度,确定一个点
var point = new BMap.Point(116.404, 39.915);
//地图中心就是这个点,并且规定地图的放大级数是15
map.centerAndZoom(point, 15);
//界面2s后中心移动到一个新点
window.setTimeout(function(){
map.panTo(new BMap.Point(116.409, 39.918));
}, 2000);
//加载一些界面上的控件:缩放控件、比例尺控件、全局控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
//在一个点上加一个标识
var marker = new BMap.Marker(point);
map.addOverlay(marker);

第四步:连网,用浏览器打开

百度地图API的第一次接触的更多相关文章

  1. 百度地图API的第一次接触——地图事件

    0.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  2. 百度地图API的第一次接触——标注和信息窗的使用

    1.定义js函数,用于在指定位置添加标注,在标注位置添加并打开信息窗口 function addMarker(point, index){ // 创建图标对象 var myIcon = new BMa ...

  3. 百度地图API的第一次接触——热区

    1.代码很简单 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  4. 百度地图API的第一次接触——右键菜单

    1.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  5. 百度地图API的第一次接触——自定义控件

    1.定义一个控件类,即function function ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEF ...

  6. 百度地图API位置偏移的校准算法

    转自极客人原文 百度地图API位置偏移的校准算法 在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过. ...

  7. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

  8. C#调用百度地图API经验分享(一)

    最近客户提了一个需求,要在网站中添加百度地图的显示,其实原来是有谷歌地图的,但由于谷歌在大陆遭到封杀,只好再给用户增加一个选择了. 下面我将自己最近整理的一些知识分享给大家. 如何使用百度地图API: ...

  9. 百度地图API的使用方法

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

随机推荐

  1. 畅通project再续 HDU杭电1875 【Kruscal算法 || Prim】

    Problem Description 相信大家都听说一个"百岛湖"的地方吧.百岛湖的居民生活在不同的小岛中.当他们想去其它的小岛时都要通过划小船来实现.如今政府决定大力发展百岛湖 ...

  2. 李振杰:火狐Mozilla被黑事件的启发

    火狐浏览器开发商Mozilla近日宣布,因为数据库存在漏洞.Mozilla开发者的数万个电子邮件地址和加密password或遭到黑客窃取. 好多有为青年们往往刚刚获得了一个小成功,便開始沾沾自喜,自命 ...

  3. Linux命令apt-get apt的常见用法

    高级包装工具(英语:Advanced Packaging Tools,缩写为APT) apt-cache search foo //搜索和"foo"匹配的包. apt-cache ...

  4. The Gray World Assumption

    Color Constancy 色彩恒常性(2)The Gray World Assumption act=qbbkrzydb_20150408_01" style="line-h ...

  5. GC入门指南(二)------GC工作原理

    本系列博客旨在帮助大家理解java垃圾收集器及其工作原理,这是系列的第二篇. java垃圾回收事实上是由一个能够进行自己主动内存管理的进程完毕的,这使得程序猿在写代码的时候不必过多考虑内存释放与回收的 ...

  6. Easy AR简单教程

    Easy AR简单教程 相关SDK资源下载链接:http://pan.baidu.com/s/1dERtCWD   密码:o0jd 1.ImageTarget的制作 (1).导入EasyARSD包,删 ...

  7. hadoop基础----hadoop理论(四)-----hadoop分布式并行计算模型MapReduce具体解释

    我们在前一章已经学习了HDFS: hadoop基础----hadoop理论(三)-----hadoop分布式文件系统HDFS详细解释 我们已经知道Hadoop=HDFS(文件系统,数据存储技术相关)+ ...

  8. Nodejs学习笔记 --- 调用命令方法ld_process.exec()和child_process.execFile()

    本文主要记录项目中使用NodeJS实现在线构建项目时,通过代码自动调用命令行. 参考资料&内容来源: Nodejs官网:http://nodejs.cn/api/child_process.h ...

  9. 流畅python学习笔记:第十二章:子类化内置类型

    子类化内置类型 在python2.2之后,内置类型都可以子类化,但是有一个注意事项:内置类型不会调用用户定义的类覆盖的特殊方法.这个说起来比较绕口,什么意思呢.我们来看下下面的代码: class Do ...

  10. ABap-小技巧

    if FIELD cn '0123456789'. *&如果字符串包含‘数字’    STOP.  endif. 同理到字母‘ABCDEFG*’ 'abcdefg*' '/' '\' 等其它字 ...