Javascript实现百度API
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。
第一步:注册百度账号

第二步:百度API,如果没有秘钥就点击申请秘钥

第三步:ak申请
注:JavaScript API只支持浏览器类型的ak(自2016年1月15日升级)。请开发者在申请ak时注意选择。

第四步:展示地图

CSS:百度图容器一定要设置宽高
#container{
width: 1200px;
height: 600px;
margin: auto;
}
HTML:百度图容器
<div id="container"></div>
引入百度地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
初始化地图逻辑
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
效果如下:

百度地图的API我就介绍到这里,大家有什么不懂的话可以查看开发文档,里面有很多功能,我建议大家有空去看看
Javascript实现百度API的更多相关文章
- 百度API使用--javascript api进行多点定位
使用百度地图提供的javascript api,给定多点的经纬度坐标,在百度地图上 显示这些坐标点. 其中包括各个点自适应地图显示,自定义坐标点的图标,以及各个点之间添加折线. 实现的效果如下图: 具 ...
- javascript使用百度地图api和html5特性获取浏览器位置
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&l ...
- 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内。以及两点间的测距功能
权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...
- html5获取经纬度,百度api获取街区名,并使用JS保存进cookie
引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...
- 【百度地图API】百度API卫星图使用方法和卫星图对比工具
原文:[百度地图API]百度API卫星图使用方法和卫星图对比工具 百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度 ...
- HTML5根据浏览器获取经度和纬度(百度API)
网页获取用户位置信息的办法1 调用百度地图的地图标注功能,通过百度地图API获取对应的经度和纬度进而获取地区信息 优点是比较准确,缺点是需要用户自己选择位置2 通过H5 geolocation属性获取 ...
- 百度api使用心得体会
最近项目中在使用百度地图api,对于其中的一些有用的点做一些归纳整理,如有不对的地方,欢迎各位大神纠正指出. 一定要学会查找百度地图api提供的类参考网站:http://lbsyun.baidu.co ...
- 百度api的使用
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 好久好久没写,,百度API逆地址解析以及删除指定marker
百度地图Api中 除覆盖物有两个方法:map.removeOverlay()或者 map.clearOverlays(),其中 clearOverlays()方法一次移除所有的覆盖物removeOve ...
随机推荐
- [考试反思]1002csp-s模拟测试56:凌乱
放假回来状态回升??(玩够了-但是稍困) T1打的不完全对,但是过掉了.很快的想到了二分吧喇叭啦.. 然后T2也挺快想出来了但是挂细节没发现,考试快结束的时候才发现出锅了. 改了过来是正解,但是出题人 ...
- kettle6.1如何连接mongodb
. Kettle的结构图如下: 2.介绍各个组件详细情况 表输入:通常是你的sql语句,这个会Kettle基础知识的都会不介绍了 JSON Output如下: MogoDB output如下: 下面这 ...
- Kettle6.1连接MongoDB报错
配置好mongodb连接之后,点击预览报下面的错: 报错: java.lang.NoClassDefFoundError: javax/crypto/spec/PBEKeySpec a ...
- Mybaits 源码解析 (十一)----- 设计模式精妙使用:静态代理和动态代理结合使用:@MapperScan将Mapper接口生成代理注入到Spring
上一篇文章我们讲了SqlSessionFactoryBean,通过这个FactoryBean创建SqlSessionFactory并注册进Spring容器,这篇文章我们就讲剩下的部分,通过Mapper ...
- Subline Text3最新激活方法解决 That license key doesn't appear to be valid.
第一步: 管理员身份登录系统 第二步: 进入到 C:\Windows\System32\drivers\etc (这个路径可以复制,都是一样的) 第三步: 右键hosts这个文件(打开方式 - 选择记 ...
- html5 点击播放video的方法
html5 点击播放video的方法<pre> <video videosrc="{$vo.shipinurl}" controls="" x ...
- vue ui九宫格、底部导航、新闻列表、跨域访问
一. 九宫格 九宫格:在mint-ui组件库基于vue框架 mui不是基于vue框架 只是css/js文件 (1)官方网站下载安装包 (2)copy css js fonts[字体图标] src/l ...
- 随机点名小程序--- -JAVA版本
话不多少,直接上代码 一个能够直接运行的随机点名的小程序,一个界面化的小程序.望广大网友多多支持! 1.创建一个随机点名的类 public class ProcessRandomName { JFra ...
- Java自学基础、进阶、项目实战网站推荐
推荐一个自学的好平台,有Java基础,前端,后端,基础的内容都有讲解,还有框架的讲解和实战项目,特别适合自学 JAVA 自学网站 JAVA 练习题 Spring 教程 Mybatis 教程 Sprin ...
- springboot~高并发下耗时操作的实现
高并发下的耗时操作 高并发下,就是请求在一个时间点比较多时,很多写的请求打过来时,你的服务器承受很大的压力,当你的一个请求处理时间长时,这些请求将会把你的服务器线程耗尽,即你的主线程池里的线程将不会再 ...