因为项目的需求,第一次接触了百度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. 移动应用开发测试工具Bugtags集成和使用教程【转载】

    前段时间,有很多APP突然走红,最终却都是樱花一现.作为一个创业团队,突然爆红是非常难得的机会.然并卵,由于没有经过充分的测试,再加上用户的激增,APP闪退.服务器数据异常等问题就被暴露出来,用户的流 ...

  2. 解决pod search出来的库不是最新

    为了让CocoaPods的引入不显示警告,在Podfile最上方加上: inhibit_all_warnings! pod search 一些第三方SDK,发现并不是最新版本,那是因为你的本地repo ...

  3. spring AOP(切面)

    AOP 基本概念cross  cutting concern横切性关注点:独立服务,遍布在系统处理流程之中 Aspect对横切关注点模块化 advice对横切关注点具体实现 pointcut定义adv ...

  4. 高复用率的RTSPClient组件EasyRTSPClient调用说明

    EasyRTSPClient 调用说明 概述 EasyRtspClient是EasyDarwin家族中针对RTSP协议的拉流组件 EasyRtspClient视频支持H264.H265.MJPEG格式 ...

  5. C#根据Type获取默认值

    简单的获取某变量类型的默认值 在c#中为我们提供了default(),但是default的参数是具体的类名, 如何根据变量类型的Type获取默认值Code如下: 1 public static obj ...

  6. 九度OJ 1058:反序输出 (基础题)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:8454 解决:3042 题目描述: 输入任意4个字符(如:abcd), 并按反序输出(如:dcba) 输入: 题目可能包含多组用例,每组用例 ...

  7. 经常遇到js的面试题

    大家都知道在面试的时候,很多前端的必须要问的就是js的问题,最近我们公司也有很多这样的面试,我提了一些个问题,还有我面试的时候面试官面试我的问题汇总,也有百度的别人的,希望对那些刚进入这个行业的有一些 ...

  8. python数据分析之:绘图和可视化

    在数据分析领域,最出名的绘图工具就是matlib.在Python同样有类似的功能.就是matplotlib.前面几章我们都在介绍数据的生成,整理,存储.那么这一章将介绍如果图形化的呈现这些数据.来看下 ...

  9. python自动化运维六:paramiko

    paramiko是基于python实现的SSH2远程安全连接,支持认证以及密钥方式,可以实现远程命令执行,文件传输,中间SSH代理等功能.也就是采用SSH的方式进行远程访问.SSH登陆的方式可以参考之 ...

  10. reduce python 的用法

    1.查看reduce 的用法 在python 命令查看 import functools help(functools) help(functools.reduce) 或者 from functool ...