百度地图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. Kong04- Kong 四大参考说明

    Kong 四大参考说明 Kong 的官方有很多详细的参考说明,比如配置文件.命令行.Admin API.代理.负载均衡,接下来我们简单看一下,都提供什么内容. 本文主要基于 Kong 1.3 版本进行 ...

  2. [考试反思]1109csp-s模拟测试107:低能

    诶一看这不是水题AK场吗?然后80分钟就拿到了285分. 然后,对拍?还是卡T2常数?还是想T2正解? 于是上述三项我依次进行了. 前两项让我的分数丝毫不变但是吃掉了我一个多小时的时间. 卡常卡的也不 ...

  3. 模板(ac):启发式合并

    首先说明一点:线段树合并不是启发式合并. 启发式合并的大概内容就是:把小的数据结构按照这个数据结构的正常插入方法,一个一个地暴力塞进去. 而线段树合并显然不是这个东西. 这道题的题解太烂了,所以耽误了 ...

  4. Function题解

    这个题最优策略一定是向左上走到某一列再往上一直走. n*q在线暴力可做,离线按y排序,单调栈维护凸壳. 具体来说:对于i<j若A[i]>A[j] 即j的斜率小而且纵截距小,一定比i优,并且 ...

  5. 建议收藏备用:.net core使用QRCoder生成普通二维码和带Logo的二维码详细使用教程,源码已更新至开源模板

    随着互联网越来越生活化,二维码的使用越来越普遍,不论是扫码支付还是扫码关注引流,似乎我们总是离不开二维码,那么很多需要推广的文章或社区想要自己的二维码,那么你是不是需要在网站直接提供给用户呢?很多开发 ...

  6. C++ 11新标准实现POJ No.1002-487-3279

    487-3279(重复的电话号码查询)(标签:优先队列,哈希表) 题目描述 企业喜欢用容易被记住的电话号码.让电话号码容易被记住的一个办法是将它写成一个容易记住的单词或者短语.例如,你需要给滑铁卢大学 ...

  7. Xshell6配置ssh免密码登录虚拟机

    首先先说明一下有密码的,涉及到root登陆权限的问题: 1.用超级管理员身份登录,修改 vi  /etc/ssh/sshd_config, 找到 把其中的permitRootLogin 修改成: # ...

  8. Win7安装解压版MySQL

    1.下载MySQL 访问https://dev.mysql.com/downloads/mysql/5.6.html#downloads,下载操作系统对应的版本(无账号需先注册一个),以mysql-5 ...

  9. Vue基础系列(二)——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  10. [LINQ2Dapper]最完整Dapper To Linq框架(六)---多表联合与匿名类型返回

    目录 [LINQ2Dapper]最完整Dapper To Linq框架(一)---基础查询 [LINQ2Dapper]最完整Dapper To Linq框架(二)---动态化查询 [LINQ2Dapp ...