参考网址： http://developer.baidu.com/map/index.php?title=jspopular/guide/widget

1.申请密钥(ak)

http://api.map.baidu.com/api?v=1.4 //参数v表示您加载API的版本，使用JavaScript APIv1.4及以前版本可使用此方式引用。

http://api.map.baidu.com/api?v=2.0&ak=您的密钥  //使用JavaScript APIv2.0请先申请密钥ak，按此方式引用。

2.基础使用

加载的js文件：<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" type="text/javascript"></script>
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Hello, World</title>

<style type="text/css">

html{height:%}

body{height:%;margin:0px;padding:0px}

#container{height:%}

</style>

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

</script>

</head>  

<body>

<div id="container"></div>

<script type="text/javascript">

var map = new BMap.Map("container");          // 创建地图实例

var point = new BMap.Point(116.404, 39.915);  // 创建点坐标

map.centerAndZoom(point, );                 // 初始化地图，设置中心点坐标和地图级别

</script>

</body>

</html>

开发移动平台上的地图应用：

（1）将地图容器高设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。

（2）添加下面的meta标签： <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。

基础添加：

（1）创建地图实例：var map=BMap.Map("#container");

（2）创建坐标点：var point =BMap.Point(116.404,39,915);

（3）地图初始化：map.centerAndZoom(point,15);  //要求设置中心坐标点及地图级别

（4）其他操作：map.enableScrollWheelZoom--鼠标滚轮控制缩放（更多在 Map类参考的配置方法）

百度地图JavaScript API [一]的更多相关文章

  1. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  2. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  3. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  4. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  5. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

    项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...

  6. 百度地图JavaScript API本地搜索的结果面板

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. 百度地图 JavaScript API

    最近有点懒  项目结尾了  完了好长时间 没有去总结项目中的问题 想了下还是写写吧 这是一个关于百度地图的 网页展示 <!DOCTYPE html><html><head ...

  8. 百度地图 Javascript API 笔记

    因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...

  9. 百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度

    前言: 前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够 ...

  10. 百度地图 JavaScript API 极速版 开发体会

    前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...

随机推荐

  1. 排序 order by 的用法

    order by  跟在select* from 后面 order by 默认的是升序, asc 升序  desc 降序 select * from 表名 order by  字段名  asc 在带有 ...

  2. C#语句2——循环语句（for循环与for循环嵌套）

    循环:反复执行某段代码. 循环四要素:初始条件,循环条件,循环体,状态改变. for(初始条件;循环条件;状态改变) { 循环体 } break ——中断循环,跳出整个循环 continue——停止本 ...

  3. 关于SQL Server镜像的一个小误区

    昨天晚上突然接到客户的电话, 说在配置了镜像的生产环境数据库下修改 “已提交读快照” 选项的时候报错, 需要先取消镜像然后再重新搭建.悲催的是这是个近TB的数据库,问我有没有什么快速的方法.于是我就问 ...

  4. APUE 习题3-2 实现dup2，要求不使用fcntl函数。

    int mydup2(int oldfd, int newfd) {     int tfd = 0;     if (newfd < 0)     {         err_sys(&quo ...

  5. EZchip将推全球首款100核64位ARM A-53芯片

    EZchip将推全球首款100核64位ARM A-53芯片 2015-02-25 16:32:03   来源:互联网    关键字: 将推  全球  64位  arm EZchip日前表示,将准备开发 ...

  6. 史上最全QC学习方案，值得收藏！

    Quality Center是一个基于Web的强大的测试管理工具,可以组织和管理应用程序测试流程的所有阶段,**制定测试需求.计划测试.执行测试和跟踪缺陷.此外,通过Quality Center还可以 ...

  7. MyBatis学习笔记(一）入门

    首先给大家推荐几个网页: http://blog.csdn.net/isea533/article/category/2092001    没事看看 - MyBatis工具:www.mybatis.t ...

  8. Logcat使用总结

    不建议用System.out.println(), 因为使用syso导致日志打印不可控制.打印时间无法确定.不能添加过滤器.日志没有级别区分等为题. Android中的日志工具类是Log(androi ...

  9. 第28章 java反射机制

    java反射机制 1.类加载机制 1.1.jvm和类 运行Java程序:java 带有main方法的类名 之后java会启动jvm,并加载字节码(字节码就是一个类在内存空间的状态) 当调用java命令 ...

  10. [No0000A9]实用word用法

    目录  TOC \o "1-3" \h \z \u 三招去掉页眉那条横线.... PAGEREF _Toc465252982 \h 08D0C9EA79F9BACE118C8200 ...