百度地图API的第一次接触
因为项目的需求,第一次接触了百度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的第一次接触的更多相关文章
- 百度地图API的第一次接触——地图事件
0.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...
- 百度地图API的第一次接触——标注和信息窗的使用
1.定义js函数,用于在指定位置添加标注,在标注位置添加并打开信息窗口 function addMarker(point, index){ // 创建图标对象 var myIcon = new BMa ...
- 百度地图API的第一次接触——热区
1.代码很简单 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...
- 百度地图API的第一次接触——右键菜单
1.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...
- 百度地图API的第一次接触——自定义控件
1.定义一个控件类,即function function ZoomControl(){ // 设置默认停靠位置和偏移量 this.defaultAnchor = BMAP_ANCHOR_TOP_LEF ...
- 百度地图API位置偏移的校准算法
转自极客人原文 百度地图API位置偏移的校准算法 在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过. ...
- 百度地图api简单使用方法
百度地图API的使用方法 百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...
- C#调用百度地图API经验分享(一)
最近客户提了一个需求,要在网站中添加百度地图的显示,其实原来是有谷歌地图的,但由于谷歌在大陆遭到封杀,只好再给用户增加一个选择了. 下面我将自己最近整理的一些知识分享给大家. 如何使用百度地图API: ...
- 百度地图API的使用方法
百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...
随机推荐
- XMLHttpRequest cannot load ''. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' ' is therefore not allowed access.
ajax跨域 禁止访问! 利用Access-Control-Allow-Origin响应头解决跨域请求
- zoj 2068 - Chopsticks
题目:非常多人在一起吃饭.有两组单支的筷子,定义badness为一对筷子长度差的平方,求最小的badness和. 分析:dp,最大公共子序列类似物. 这里利用数学关系找到一个结论: a < b ...
- 【bootstrap】右侧sidebar不跟着内容滚动的异常
移动开发需要依赖于Web服务的接口,但是写这个接口文档实在是比较繁琐,所以今天我就写了个包解析程序自动生成接口文档. 内容显示我是借鉴Bootstrap的官方教程http://v3.bootcss.c ...
- CF459C Pashmak and Buses 打印全排列
这题假设将终于的结果竖着看,每一列构成的数能够看成是k进制的数.一共同拥有d列,随意两列都不同样,所以这就是一个d位k进制数全排列的问题,一共同拥有k ^ d个排列.假设k ^ d < n,则打 ...
- Android OOM解决方案 :
清单文件里 给Application标签加上android:largeHeap="true"这行代码 这样会给你的app分配一个大内存 如果某个页面在绘制时会耗非常多的内存 ...
- python 基础 4.0 函数的一般形式及传参
#/usr/bin/python #coding=utf-8 #@Time :2017/10/23 15:58 #@Auther :liuzhenchuan #@File :函数的一般形式.p ...
- gulp的使用方法
---恢复内容开始--- 什么是gulp? Gulp.js是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务. 使用步骤: 1.全局安装gulp: npm install - ...
- MySql 三大知识点——索引、锁、事务(转)
1. 索引 索引,类似书籍的目录,可以根据目录的某个页码立即找到对应的内容. 索引的优点:1. 天生排序.2. 快速查找.索引的缺点:1. 占用空间.2. 降低更新表的速度. 注意点:小表使用全表扫描 ...
- 图床QAQ
- Qt — tableWidget插入复选框
之前不太了解Qt中的相关控件,一直尝试直接在tableview上增加复选框. 但相对来说,在tableview增加复选框的工作量与麻烦程度远超tableWidget. 接下来是如何在Qt的tableW ...