参考网址: 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. css之盒模型

    盒模型由内容(content).填充(padding).边框(border).边界(margin)组成,一个盒子中主要的属性就5个:width.height.padding.border.margin ...

  2. python列表模拟堆栈和队列

    对列特点:先进先出.后进后出 用列表insert.pop模拟进队出队: >>> l = [] >>> l.insert(0,'p1') >>> l ...

  3. IBM Bluemix体验:Containers持久存储

    上一篇介绍了在Bluemix Containers服务中使用docker hub镜像和container的高可用配置.接下来我们尝试如何在容器中使用持久存储. 在Bluemix的Containers服 ...

  4. Ubuntu 一直掉线 以及连不上网 解决办法

    新装了一个Ubuntu 系统16.04才使用的时候一切顺利 但是过了两三天  就会出现 频繁掉线的情况 于是上网找大神们的解决办法 把文件 /etc/ppp/options 里面的一个数值改大一点 l ...

  5. svn cleanup 执行失败时,可以勾选 break locks,

  6. Linux下的C Socket编程 -- 简介与client端的处理

    Linux下的C Socket编程(一) 介绍 Socket是进程间通信的方式之一,是进程间的通信.这里说的进程并不一定是在同一台机器上也有可能是通过网络连接的不同机器上.只要他们之间建立起了sock ...

  7. IE6读取不到样式文件bug

    早年的东东,贴出来充一下数吧~ 问题描述 在一个弹层优化需求中,完成了修改后,刷一下其他(除IE6外)浏览器,很给力,展现都一个样: 再刷下IE6,傻眼了: 初步分析 IE6问题多我知道,不过像这样的 ...

  8. [LeetCode] String to Integer (atoi) 字符串转为整数

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  9. ie11的DOM管理器报错

    IE11 Windows7下F12 DOC资源管理器不能用Exception in window.onload: Error: An error has ocurredJSPlugin.3005--- ...

  10. HV000030: No validator could be found for type: java.lang.Integer.

    在写接口时,一般去查找在类的Integer属性上加了不属于整型的校验,比如@NotEmpty,@Length等 @JSONField(name = "deviceNum") @No ...