所需软硬件
软件环境：Windows7、Dreamweaver8(或者其他文本编辑器)
硬件环境：4.0G内存 2.6GHz
介绍软件安装配置步骤
安装Dreamweaver8
（1）下载好的安装包放到一个合适的磁盘中双击后选择下一步。
（2）选择“我接受该许可证协议中的条款”并点击下一步。
（3）接下来弹出的对话框是提示我们用户安装的位置，选择一个合适的磁盘安装，点击下一步。
（4）弹出DW8默认的一些编辑器，选择那些需要的安装，并进行下一步。
（5）接下是点击安装，完成。下图是安装完成界面
2. 实验工具—百度地图API
注册百度地图API
（1）登录百度地图API首页，网站为：http://lbsyun.baidu.com/
（2）注册成为百度地图开发者
选择JavaScript API进行注册
（3）获取密钥，通过创建应用获取密钥
百度地图的部分功能简介
基本地图功能：展示（支持2D图、3D图、卫星图）、平移、缩放、拖拽等。
地图控件展示功能：可以在地图上添加/删除鹰眼、工具条、比例尺、自定义版权、地图类型及定位控件，并可以设置各类控件的显示位置。
覆盖物功能：支持在地图上添加/删除点、线、面、热区、行政区划、用户自定义覆盖物等；开源库提供富标注、标注管理器、聚合marker、自定义覆盖物等功能。
工具类功能：提供经纬度坐标与屏幕坐标互转功能；开源库里提供测距、几何运算及GPS坐标/国测局坐标转百度坐标等功能
定位功能：支持IP定位及浏览器（支持html5特性浏览器）定位功能。
控件：百度地图上负责与地图交互的UI元素称为控件
Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
控件
MapTypeControl：地图类型控件，默认位于地图右上方。
CopyrightControl：版权控件，默认位于地图左下方。
GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。
覆盖物
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
地图API提供了如下几种覆盖物：
Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。
Marker：标注表示地图上的点，可自定义标注的图标。
Label：表示地图上的文本标注，您可以自定义标注的文本内容。
Polyline：表示地图上的折线。
Polygon：表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其添加填充颜色。
Circle: 表示地图上的圆。
InfoWindow：信息窗口也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。注意：同一时刻只能有一个信息窗口在地图上打开。
工具
MarkerTool：标注工具。通过此工具用户可在地图任意区域添加标注。
MarkerClusterer：多标注聚合器。此工具解决加载大量点要素到地图上造成缓慢，且产生覆盖现象的问题。
MarkerManager：标注管理工具。此工具提供展示、隐藏、清除所有标注。
RichMarker：富标注工具。此工具为用户提供自定义Marker样式，并添加点击、双击、拖拽等事件。
DistanceTool：测距工具。通过此工具用户可测量地图上任意位置之间的距离。
RectangleZoom：区域缩放工具。此工具将根据用户拖拽绘制的矩形区域大小对地图进行放大或缩小操作。
MapWrapper：地图搬家工具。此工具提供了将Google或GPS坐标形式的Marker添加到百度地图上的功能。
InfoBox：自定义信息窗口工具。类似于infoWindow，比infoWindow更有灵活性，比如可以定制border，关闭按钮样式等。
准备页面
根据HTML标准，每一份HTML文档都应该声明正确的文档类型
<!DOCTYPE html>
添加一个meta标签，以便使您的页面更好的在移动平台上展示。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
设计样式：设置样式，使地图充满整个浏览器窗口
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {height:100%; width: 100%;}
#r-result{width:100%; font-size:14px;line-height:20px;}
初始化百度地图
var map = new BMap.Map("allmap"); //创建地图实例
map.setMapStyle({styleJson:styleself});
map.centerAndZoom("西安", 6); //地图初始化
map.enableScrollWheelZoom(); //开启鼠标滚轮实现缩放的功能
创建点坐标
创建31个点坐标存储在p数组中
例如：
p[15]=new BMap.Point(120.951617,30.447675); //嘉兴
p[16]=new BMap.Point(119.471288,34.695055); //连云港 //核电
p[17]=new BMap.Point(114.537149,22.598611); //深圳
创建图标对象并指定大小
如：
var Gicon=new BMap.Icon("光电.png",new BMap.Size(38, 24));
var Gicon1=new BMap.Icon("光电-故障.png",new BMap.Size(38, 25));
var HEicon=new BMap.Icon("核电.png",new BMap.Size(31, 17));
var HEicon1=new BMap.Icon("核电-故障.png",new BMap.Size(31, 18));
var Sicon=new BMap.Icon("水电.png",new BMap.Size(31, 17));
var Sicon1=new BMap.Icon("水电-故障.png",new BMap.Size(31, 18));
电站故障动作
function hedian(e)
{
//核力发电-故障动作
var p=e.target;
p.setIcon(HEicon1);
setTimeout(function(){hedianG(e);},400);
}
节点注册
例如注册核电站：
for(var i=15;i<18;i++)
{
var marker=new BMap.Marker(p[i]);
marker.setIcon(HEicon); //核电注册：深圳、连云港、嘉兴
map.addOverlay(marker);
marker.addEventListener("click",hedian);
}
添加折线覆盖物 ：把高压线路连接起来
map.setViewport(p);
//东纵：北京-福州
var polyline1 = new BMap.Polyline([
p[23],p[20],p[22],p[21],p[19],p[15],p[8]
], {strokeColor:"red", strokeWeight:2, strokeOpacity:1});
map.addOverlay(polyline1);
4.效果图
