参考网址： 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. [转载】——故障排除：Shared Pool优化和Library Cache Latch冲突优化 (文档 ID 1523934.1)

    原文链接:https://support.oracle.com/epmos/faces/DocumentDisplay?_adf.ctrlstate=23w4l35u5_4&id=152393 ...

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

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

  3. 安全测试 - XSS如何防御

    XSS主要是通过劫持用户COOKIE,执行JS脚本进行攻击 如何发现: 可以使用<script>alert(/yourname/)</script> script最具有代表性也 ...

  4. pcl计算样点法向并显示

    利用最小二乘法估计样点表面法向,并显示 #include <pcl/point_types.h> #include <pcl/io/pcd_io.h> #include < ...

  5. dubbox升级spring到4.x及添加log4j2支持

    今天花了点时间,把dubbox依赖的spring从3.x升级成最新版的4.x了,其它一些依赖的组件也顺带升级了,同时dubbo支持的第三方日志组件居然没有log4j2,加了点代码也一并支持了,蛋疼的是 ...

  6. Node.js起步 -- （1）

    先来简单介绍nodeJS 我们知道JavaScript是运行在浏览器中的,浏览器为它提供了一个上下文(context),从而让JavaScript得以解析执行. nodeJS其实可以这么理解,它是另外 ...

  7. [LeetCode] Convex Polygon 凸多边形

    Given a list of points that form a polygon when joined sequentially, find if this polygon is convex ...

  8. [LeetCode] Convert a Number to Hexadecimal 数字转为十六进制

    Given an integer, write an algorithm to convert it to hexadecimal. For negative integer, two’s compl ...

  9. 编写轻量ajax组件02-AjaxPro浅析

    前言 上一篇介绍了在webform平台实现ajax的一些方式,并且实现一个基类.这一篇我们来看一个开源的组件:ajaxpro.虽然这是一个比较老的组件,不过实现思想和源码还是值得我们学习的.通过上一篇 ...

  10. Euler-Maruyama discretization（"欧拉-丸山"数值解法）

    欧拉法的来源 在数学和计算机科学中,欧拉方法(Euler method)命名自它的发明者莱昂哈德·欧拉,是一种一阶数值方法,用以对给定初值的常微分方程(即初值问题)求解.它是一种解决常微分方程数值积分 ...