因为项目的需求,第一次接触了百度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. hadoop权威指南学习

    通常情况下,处理少量的大型文件更容易.更有效,为什么呢? map阶段中的键如果不需要可以忽略掉? MapReduce过程也可以用于本地文件的处理,但是如果是要使用到集群的话还需要HDFS. Data ...

  3. easyUI中 datagrid 一列字比较多时,出现省略符号

    当数据比较多为,出现省略符号 <style type="text/css">            .datagrid-cell, .datagrid-cell-gro ...

  4. ANDROID 推送到底哪家强(转)

    之前在群里有同学问我关于推送的一些问题,解答之后我觉得这个话题还挺有用,因为几乎大部分人都会遇到这个问题,那姑且就写篇文章总结给你们吧. 1. 为什么要用推送? 推送功能可谓是现如今任何一个 App ...

  5. PHP购物车模块的实现(php/ajax/session)

    购物车网页代码 1.登录界面login.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  6. 实现RTSP网站微信直播方案EasyNVR(linux版)部署问题之:ERR_CONTENT_LENGTH_MISMATCH

    发现问题: 想要优化一下EasyNVR相关功能,内部测试软件,于是在linux系统中部署了一台EasyNVR.当部署好,运行起来发现问题: EasyNVR的配置页面数据出不来. 分析问题: 基于是we ...

  7. 扩容数据盘_Linux

    扩容数据盘_Linux_扩容云盘_云盘_用户指南_云服务器 ECS-阿里云 https://help.aliyun.com/document_detail/25452.html 磁盘扩容付费后: 在控 ...

  8. 我的Android进阶之旅------>温习Sqlite3的常用操作

    前言;今天要写一个应用来调节系统的Brightness值,来改变系统的背光亮度.由于刚开始些的时候没有考虑Brightness的最小值,直接托动SeekBar到最小值(为0).瞬间,屏幕变成全黑,失败 ...

  9. 一文读懂实用拜占庭容错(PBFT)算法

        在区块链中有一个著名的问题,就是拜占庭将军问题,对于拜占庭将军问题,网上的文章已经多得不要不要了,今天和大家分享的是其相关的实用拜占庭容错算法,一起来看看吧. 实用拜占庭容错算法(Practi ...

  10. 模拟登陆,selenium,线程池

    一 . 模拟登陆案例(识别验证码)  1 . 打码平台 - 云打码 : www.yundama.com  使用步骤 : - 注册两个账户,普通用户和开发者用户 : - 登陆 普通用户查看余额 登陆开发 ...