百度地图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的更多相关文章

  1. 百度API使用--javascript api进行多点定位

    使用百度地图提供的javascript api,给定多点的经纬度坐标,在百度地图上 显示这些坐标点. 其中包括各个点自适应地图显示,自定义坐标点的图标,以及各个点之间添加折线. 实现的效果如下图: 具 ...

  2. javascript使用百度地图api和html5特性获取浏览器位置

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&l ...

  3. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内。以及两点间的测距功能

    权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...

  4. html5获取经纬度,百度api获取街区名,并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  5. 【百度地图API】百度API卫星图使用方法和卫星图对比工具

    原文:[百度地图API]百度API卫星图使用方法和卫星图对比工具 百度地图API推出卫星图接口也有一个月啦~ 本文除了介绍如何使用百度地图API来操作卫星图外,还顺带制作了个卫星图对比工具. 一.百度 ...

  6. HTML5根据浏览器获取经度和纬度(百度API)

    网页获取用户位置信息的办法1 调用百度地图的地图标注功能,通过百度地图API获取对应的经度和纬度进而获取地区信息 优点是比较准确,缺点是需要用户自己选择位置2 通过H5 geolocation属性获取 ...

  7. 百度api使用心得体会

    最近项目中在使用百度地图api,对于其中的一些有用的点做一些归纳整理,如有不对的地方,欢迎各位大神纠正指出. 一定要学会查找百度地图api提供的类参考网站:http://lbsyun.baidu.co ...

  8. 百度api的使用

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 好久好久没写,,百度API逆地址解析以及删除指定marker

    百度地图Api中 除覆盖物有两个方法:map.removeOverlay()或者 map.clearOverlays(),其中 clearOverlays()方法一次移除所有的覆盖物removeOve ...

随机推荐

  1. Spring Boot实战之定制URL匹配规则

    本文首发于个人网站:Spring Boot实战之定制URL匹配规则 构建web应用程序时,并不是所有的URL请求都遵循默认的规则.有时,我们希望RESTful URL匹配的时候包含定界符". ...

  2. 【ASP.NET Core学习】Entity Framework Core

    这里介绍在ASP.NET Core中使用EF Core,这里数据库选的是Sql Server 如何使用Sql Server 添加模型 && 数据库迁移 查询数据 保存数据 如何使用Sq ...

  3. 原生JS实现单向链表

    1.前言 用JS实现一个简单的单向链表,并完成相关的功能 2.功能说明 push(value):从链表尾部添加一个新的节点 insertAfer(value,item):向链表中的item节点之后插入 ...

  4. VUE 表格进入页面加载初始数据及操作后刷新数据

    1.获取列表数据方法 2.打开页面默认加载数据 3.操作后重新获取数据

  5. Hadoop4-HDFS分布式文件系统原理

    一.简介 1.分布式文件系统钢结构 分布式文件系统由计算机集群中的多个节点构成,这些节点分为两类: 主节点(MasterNode)或者名称节点(NameNode) 从节点(Slave Node)或者数 ...

  6. 关于设备与canvas画不出来的解决办法

    连续四天解决一个在三星手机上面画canvas的倒计时饼图不出来的问题,困惑了很久,用了很多办法,甚至重写了那个方法,还是没有解决,大神给的思路是给父级加 "overflow: visible ...

  7. Feign 调用丢失Header的解决方案

    问题 在 Spring Cloud 中 微服务之间的调用会用到Feign,但是在默认情况下,Feign 调用远程服务存在Header请求头丢失问题. 解决方案 首先需要写一个 Feign请求拦截器,通 ...

  8. 关于配置Nginx反向代理后SpringSecurity认证失败的问题解决

    问题背景 最近在写的一个项目,采用前后端分离的方式进行开发,登录认证使用的是SpringSecurity框架. 问题描述 在项目部署的时候出现了一个问题,在自己电脑上运行的时候一切顺畅,可是部署到服务 ...

  9. Linux安装telnet C/S 【白话文】

    1.安装telnet 和telnet-server yum -y install telnet yum -y install telnet-server 注意:在此安装过程中,会依赖解决xinetd的 ...

  10. 使用Amazon EMR和Apache Hudi在S3上插入,更新,删除数据

    将数据存储在Amazon S3中可带来很多好处,包括规模.可靠性.成本效率等方面.最重要的是,你可以利用Amazon EMR中的Apache Spark,Hive和Presto之类的开源工具来处理和分 ...