参考网址: 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. 用批处理脚本一键安装 MongoDB

    下载MongoDB安装文件,解压到D:\MongoDB: 运行脚本: @echo off set mongobin=D:\MongoDB ::在mongodb文件夹下建立data,log文件夹 md ...

  2. Windows Server 2012 虚拟化实战:SCVMM的安装和部署

    本篇大概介绍一下在Windows Server 2012 R2上安装和部署SCVMM的过程及其注意事项.下图是我们数据中心SCVMM的基本架构,其中 SCVMM Database 是用于存储了所有配置 ...

  3. mongodb基础篇

    一.  关于mongodb 两种非关系数据库 Redis:满足极高读写性能的Key-Value数据库 键值式储存,可以通过键快速查询到值. 内存数据库,类似于mencached.性能出色.容量低,不具 ...

  4. Android Studio导入Project、Module的正确方法

    Gradle Project项目.Module模块导入 最近看到网上很多人在抱怨,Android Studio很难导入github上下载下来的一些项目,主要包括: 1.导入就在下载Gradle2.根本 ...

  5. hadoopfs: 未找到命令...

    https://zhidao.baidu.com/question/240817305095236244.html 学习hadoop测试http://blog.csdn.net/thinkpadshi ...

  6. eclipse调试java程序的九个技巧

    转:http://www.cnblogs.com/lingiu/p/3802391.html 九个技巧: 逻辑结构 条件debug 异常断点 单步过滤 跳到帧 Inspect expressions ...

  7. JAVA设计模式之3-抽象工厂模式

    书接上文,简单工厂模式解决的是可以枚举种类的类的问题,但是带来了高耦合的问题,并且对类系列繁多无从下手,那么我们想起了一种方法,那就是抽象类,建一个抽象工厂,抽象工厂里的方法都是根据系列类的差异区分出 ...

  8. [LeetCode] Odd Even Linked List 奇偶链表

    Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...

  9. 记一次企业级爬虫系统升级改造(二):基于AngleSharp实现的抓取服务

    爬虫系统升级改造正式启动: 在第一篇文章,博主主要介绍了本次改造的爬虫系统的业务背景与全局规划构思: 未来Support云系统,不仅仅是爬虫系统,是集爬取数据.数据建模处理统计分析.支持全文检索资源库 ...

  10. phpstorm 无法格式化代码

    phpstorm 默认的格式化代码的快捷键是 Ctrl + Alt + L,但是按了没有反应. 原因是当时开着网易云音乐,占用了这个快捷键,关了就好了.另外其他的程序比如QQ也有可能占用这个快捷键.