百度地图API 应用实例

最近在做一个GIS路线查询页面，要用到地图，开始想用GOOGLE，但中国地图还是百度比较详细

 

第一步：引用百度API的JS库

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

第二步：创建放置地图的DIV

<div id="clientmap" style="width: 100%; height: 100%">
</div>

第三步：创建地图

 var map = new BMap.Map("clientmap");                             //创建地图实例

到这里就可以开始实现地图，接下来是地图的一些常用操作

map.addControl(new BMap.NavigationControl());                    //添加默认缩放平移控件
map.addControl(new BMap.ScaleControl());                         //添加默认比例尺控件
map.addControl(new BMap.OverviewMapControl());                   //添加默认缩略地图控件 
map.addControl(new BMap.MapTypeControl());                       //2D图，卫星图  
map.enableScrollWheelZoom();                                     //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); 

地址解析器实例

var myGeo = new BMap.Geocoder();                                 //创建地址解析器实例

myGeo.getPoint(data.rows[i].address, function (point) {             // 将地址解析结果显示在地图上,并调整地图视野
　　if (point) {
　　　　map.centerAndZoom(point, 10);                              //设置中心点并按系数放大
　　}
}, "");

创建标注并点击标注弹出信息提示

//信息内容
var sContent = "<table>" +
"<tr><td>客户名称：</td><td>" + data.rows[i].name + "</td></tr>" +
"<tr><td>联系人：</td><td>" + data.rows[i].linkman + "</td></tr>" +
"<tr><td>手机号码：</td><td>" + data.rows[i].mobile + "</td></tr>" +
"<tr><td>固定电话：</td><td>" + data.rows[i].phone + "</td></tr>" +
"<tr><td>传真：</td><td>" + data.rows[i].fax + "</td></tr>" +
"<tr><td>Email：</td><td>" + data.rows[i].email + "</td></tr>" +
"<tr><td>客户地址：</td><td>" + data.rows[i].address + "</td></tr>" +
"</table>";

var marker = new BMap.Marker(point);                        // 创建标注
var infoWindow = new BMap.InfoWindow(sContent);             // 创建信息窗口对象
marker.addEventListener("click", function () {              // 标注点击打开信息窗口
　　this.openInfoWindow(infoWindow);
});

map.addOverlay(marker);                                    // 将标注添加到地图中

将折线添加到地图中

var polyline = new BMap.Polyline([points, point]);     //折线蓝色、宽度为6
map.addOverlay(polyline);                              // 将折线添加到地图中