目录
参考网站：http://lbsyun.baidu.com/index.php?title=jspopular
这篇文章由于自己的快速学习，所以主要是复制参考网页的重点来帮助自己记忆。
一.前言
1.产品简介：
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
2.注册秘钥
需要使用百度地图，需先注册百度账号，之后再根据步骤申请秘钥。http://lbsyun.baidu.com/apiconsole/key/create通过该网站：选择创建应用》应用类型为浏览器端》白名单可设置为“*”就是所有》之后提交
二.创建地图
1.HelloWorld-简单地图示例
<!DOCTYPE html>
<html>
<head>
<!-- 适用移动端页面展示 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<!-- 设置容器样式大小，使地图充满整个浏览器窗口 -->
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
<!-- 1.引入百度地图的API文件，ak填自己注册的秘钥 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
</head>
<body>
<!-- 2.定义一个容器来接受地图 -->
<div id="container"></div>
<!--
3.通过脚本来创建地图
3.1默认情况下地图不支持鼠标滚轮缩放操作,可以调用map.enableScrollWheelZoom()方法来开启。
3.2panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。
-->
<script type="text/javascript">
// 创建地图实例 ，位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
var map = new BMap.Map("container");
// 创建点坐标，使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
var point = new BMap.Point(116.404, 39.915);
// 初始化地图，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true); //开启支持滚轮缩放
//panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。
window.setTimeout(function() {
alert("jinru");
map.panTo(new BMap.Point(116.409, 39.918)); //移动到指定位置
this;
}, 2000); //设置两秒之后执行该方法
</script>
</body>
</html>
坐标转换：百度对外接口的坐标系为BD09坐标系，并不是GPS采集的真实经纬度，在使用百度地图JavaScript API服务前，需先将非百度坐标通过坐标转换接口转换成百度
2.添加控件
百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，您还可以通过Control类来实现自定义控件。
| 控件 | 类名 | 简介 |
| 抽象基类 | Control | 所有控件均继承此类的方法、属性。通过此类您可实现自定义控件 |
| 平移缩放控件 | NavigationControl | PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方 |
| 缩略地图 | OverviewMapControl | 默认位于地图右下方，是一个可折叠的缩略地图 |
| 比例尺 | ScaleControl | 默认位于地图左下方，显示地图的比例关系 |
| 地图类型 | MapTypeControl | 默认位于地图右上方 |
| 版权 | CopyrightControl | 默认位于地图左下方 |
| 定位 | GeolocationControl | 针对移动端开发，默认位于地图左下方 |
map.addControl(new BMap.NavigationControl());//平移缩放控件
map.addControl(new BMap.ScaleControl());//比例尺控件
map.addControl(new BMap.OverviewMapControl());//略缩图控件
map.addControl(new BMap.MapTypeControl());//地图类型控件（地图卫星、三维）
map.setCurrentCity("长沙"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用 （官网原话，但是不太理解）2.1、控制控件位置
1.anchor：（控件停靠位置）（anchor值不需要加引号）
| anchor值 | 位置说明 |
| BMAP_ANCHOR_TOP_LEFT | 表示控件定位于地图的左上角 |
| BMAP_ANCHOR_TOP_RIGHT | 表示控件定位于地图的右上角 |
| BMAP_ANCHOR_BOTTOM_LEFT | 表示控件定位于地图的左下角 |
| BMAP_ANCHOR_BOTTOM_RIGHT | 表示控件定位于地图的右下角 |
2.offset：（控件位置偏移）
通过偏移量来指示控件距离地图边界有多少像素。如果两个控件的停靠位置相同，那么控件可能会重叠在一起，这时就可以通过偏移值使二者分开显示。（偏移的参数与位置（左上、右上等）有关）
//offset属性：x偏移150，y偏移5；anchor属性：左上角
var opts = {offset: new BMap.Size(150, 5),anchor:BMAP_ANCHOR_TOP_LEFT}
map.addControl(new BMap.ScaleControl(opts));2.2、控件的类型
| 平移缩放控件的类型（NavigationControl） | 说明 |
| BMAP_NAVIGATION_CONTROL_LARGE | 表示显示完整的平移缩放控件 |
| BMAP_NAVIGATION_CONTROL_SMALL | 表示显示小型的平移缩放控件 |
| BMAP_NAVIGATION_CONTROL_PAN | 表示只显示控件的平移部分功能 |
| BMAP_NAVIGATION_CONTROL_ZOOM | 表示只显示控件的缩放部分功能 |
//调整平移缩放控件的外观
var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL}
map.addControl(new BMap.NavigationControl(opts));2.3、自定义控件
/*
* 添加一个自定义控件（前面需要先创建地图的实例）
*/
//1.定义一个自定义控件的构造函数、并继承Control。
function ZoomControl(){
//设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
this.defaultOffset = new BMap.Size(100,30);
}
//通过JavaScript的prototype属性继承于BMap.Control();
ZoomControl.prototype = new BMap.Control();
//2.初始化自定义控件。自定义控件必须实现initialize方法，并将控件的DOM元素返回（当调用map.addControl()方法添加自定义控件时，API会调用该对象的initialize()方法用来初始化控件）
ZoomControl.prototype.initialize = function(map){
//创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode("放大2级"));
// 设置样式
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
//绑定事件，点击一次放大两级
div.onclick = function(e){
map.zoomTo(map.getZoom()+2);
}
//将DOM添加到地图中
map.getContainer().appendChild(div);
//将DOM元素返回
return div;
}
//3.添加自定义控件
//创建控件实例
var myZoomCtrl = new ZoomControl();
//添加到地图中
map.addControl(myZoomCtrl);3、个性化地图
1.支持用户使用JavaScript API设置地图底图的样式风格（展现颜色为普通、深色、浅色）
2.控制组成地图底图的元素类的显示和隐藏，创建满足用户特定需求的与众不同的地图，如通过隐藏某类地图元素，突出展示自己的数据。
3.个性化定制功能同时适用于pc端和手机端全部浏览器。
3.1、定制方式
1.通过百度地图提供的样式模板，选择地图，然后通过JavaScriptAPI的setMapStyle方法调用生效。
方式：选择模板》设置地图样式（通过setMapStyle()方法）
map.setMapStyle({style: "bluish"}); //通过模板名（bluish）设置地图样式2.通过个性地图编辑工具，自行编辑地图展示样式，生成地图样式json，然后通过JavaScriptAPI的方法调用生效。
//通过json来设置地图样式（个性地图编辑工具生成的json）
var myStyleJson = [{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": {
"color": "#ff0000"
}
}];
//设置地图样式
map.setMapStyle({
styleJson: myStyleJson
});三、地图上绘制
1.所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
2.覆盖物主要分为：标注（点标注、矢量图形（包括折线、多边形、圆））、信息窗口、图层。
1、标注
可以使用map.addOverlay方法向地图添加覆盖物，使用map.removeOverlay方法移除覆盖物，注意此方法不适用于InfoWindow。
| 覆盖物 | 类名 | 说明 |
| 抽象基类 | Overlay | 所有的覆盖物均继承此类的方法 |
| 点 | Marker | 表示地图上的点，可自定义标注的图标 |
| 文本 | Label | 表示地图上的文本标注，您可以自定义标注的文本内容 |
| 折线 | Polyline | 表示地图上的折线 |
| 多边形 | Polygon | 表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色 |
| 圆 | Circle | 表示地图上的圆 |
| 信息窗口 | InfoWindow | 信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开 |
| 地面叠加层 | GoundOverlay | 表示叠加在地图上的图片，图片的链接、大小、位置等属性可以自定义 |
| 海量点 | PointCollection | 针对点的数量很大的情况，可以使用海量点进行展示 |
| 自定义覆盖物 | 自定义 | 支持通过继承覆盖物基类Overlay，自定义覆盖物 |
1.1、标注点（Marker）
1.API提供了默认图标样式，您也可以通过Icon类来指定自定义图标。
2.Marker的构造函数的参数为Point和MarkerOptions（可选）。
/*
* 定义标注图标,并随机生成6个标注
*/
//1.通过方法来设置标注
function addMarker(point, index) {
//创建图标对象
//参1：标注的图片位置
//参2：标注大小
//参3：标注的偏移位置（anchor）、截取图片某部分作为图标（imageOffset）
var myIcon = new BMap.Icon("img/markers.png", new BMap.Size(26, 26), {
anchor: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0 - index * 34) //原点在左上角
});
//创建标注对象并添加到地图
var marker = new BMap.Marker(point, {
icon: myIcon
});
//添加标注
map.addOverlay(marker);
//设置标注的监听
marker.addEventListener("click", function() {
alert("您点击了标注");
});
//拖拽
marker.enableDragging(); //开启标注的拖拽功能
marker.addEventListener("dragend", function(e) { //开启拖拽功能后，可以监听拖拽事件
alert("当前位置：" + e.point.lng + ", " + e.point.lat);
})
}
// 随机向地图添加10个标注 （获取地图地址，之后再随机分配，因为地图的坐标所以需要特定的格式）
var bounds = map.getBounds();
//alert(JSON.stringify(bounds))
//也许是版本的原因，官网获得的是undefined，所以自己瞎弄了一下，虽然可以出效果，但是肯定不准确
//var lngSpan = bounds.maxX - bounds.minX;
//var latSpan = bounds.maxY - bounds.minY;
var lngSpan = bounds.xl.lng;
var latSpan = bounds.xl.lat;
for(var i = 0; i < 6; i++) {
//alert("lngSpan:" + lngSpan + "\nlatSpan:" + latSpan);
var point1 = new BMap.Point(lngSpan * (Math.random() * 0.7 + 0.15),
latSpan * (Math.random() * 0.7 + 0.15));
addMarker(point1, i);
}1.2、标注折线
//生成折线标注
var polyline = new BMap.Polyline([
new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920),new BMap.Point(116.199, 39.980)
], {
strokeColor: "blue",
strokeWeight: 6,
strokeOpacity: 0.5
});
map.addOverlay(polyline);