<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Hello,
World</title>
<!--上面是引入API文件，serviceAPI是否加载服务部分，true表示加载，false表示不加载，默认为true。-->
<script type="text/javascript"
src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=true"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px
solid gray"
id="container"></div>
<div
id="info"></div>
<div style="background: green;"
id="info2"></div>
<input type="button" value="开启"
onclick="myDis.open()" />
<input type="button" value="关闭"
onclick="myDis.close()" />
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container"); //创建地图实例
var point = new BMap.Point(106.33, 29.35);
//创建点坐标,经度和纬度
map.centerAndZoom(point, 15); // 地图初始化
map.addControl(new BMap.NavigationControl());
//将标准地图控件添加到地图中 很明显 在左上角
map.addControl(new BMap.ScaleControl());
//一个比例尺控件 在左下角有一个500米
map.addControl(new BMap.OverviewMapControl());
//一个缩略图控件 在右下角箭头处
map.addControl(new BMap.TrafficControl());
//添加实时路况控件
var tilelayer = new BMap.TileLayer(); //
创建地图层实例
tilelayer.getTilesUrl=function(){ // 设置图块路径
return "layer.gif";
};
map.addTileLayer(tilelayer); // 将图层添加到地图上
window.setTimeout(function(){ //等待两秒会移动到新中心点
map.panTo(new BMap.Point(116.409, 39.918));
}, 2000);
// 编写自定义函数，创建标注
function addMarker(point,
index){
// 创建图标对象
var myIcon = new
BMap.Icon("http://api.map.baidu.com/img/markers.png", new
BMap.Size(23, 25), {
offset: new BMap.Size(10,
25), // 指定定位位置
imageOffset: new
BMap.Size(0, 0 - index * 25) // 设置图片偏移
});
var marker = new BMap.Marker(point, {icon:
myIcon});
map.addOverlay(marker);
}
// 随机向地图添加10个标注
var bounds = map.getBounds(); //得到边界
var lngSpan = bounds.maxX - bounds.minX; //最大减去最小 x 横坐标
var latSpan = bounds.maxY - bounds.minY; //y
纵坐标
for (var i = 0; i < 10; i ++) {
var point = new BMap.Point(bounds.minX + lngSpan *
(Math.random() * 0.7 + 0.15),
bounds.minY + latSpan * (Math.random() * 0.7 +
0.15));
addMarker(point, i);
}
var opts1 = {
width : 200, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "北京天安门" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("北京天安门", opts1);
// 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());
// 打开信息窗口
//两点之间创建6像素宽的蓝色折线：
var polyline = new BMap.Polyline([
new BMap.Point(116.399,
39.910),
new BMap.Point(116.405,
39.920)
], {strokeColor:"blue", strokeWeight:6,
strokeOpacity:0.5}
);
map.addOverlay(polyline);
//添加事件，点击事件
map.addEventListener("click", function(e){
//var center = map.getCenter();
// alert(center.lng + ", " + center.lat);
document.getElementByIdx_x_x_x("info").innerHTML = e.point.lng +
", " + e.point.lat; //通过e对象得到点击的经纬度坐标
});
//拖动事件
map.addEventListener("dragend", function(){
var center = map.getCenter();
document.getElementByIdx_x_x_x("info").innerHTML = center.lng +
", " + center.lat;
});
//通过this得到地图缩放后的级别。 地图缩放事件
map.addEventListener("zoomend", function(){
document.getElementByIdx_x_x_x("info").innerHTML = "地图缩放至：" +
this.getZoom() + "级";
});
//map.removeEventListener("click", showInfo);
移除监听事件
var myPushpin = new BMap.PushpinTool(map); // 创建标注工具实例
myPushpin.addEventListener("markend", function(e){
// 监听事件，提示标注点坐标信息
alert("您标注的位置：" +
e.marker.getPoint().lng + ", " +
e.marker.getPoint().lat);
});
myPushpin.open(); //
开启标注工具
var myDis = new BMap.DistanceTool(map); //创建一个测距工具实例：
//设置为地图实例，并告知结果需要展现在地图实例上
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local.search("天安门");
//每页显示8个结果，并且根据结果点位置自动调整地图视野，不显示第一条结果的信息窗口
var local1 = new BMap.LocalSearch("北京市", {
renderOptions: {
map: map,
pageCapacity: 8,
autoViewport: true,
selectFirstResult: false
}
});
local1.search("中关村");
//本地搜索对象提供一个结果列表容器，搜索结果会自动添加到容器元素中
var local2 = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "results"}
});
local2.search("中关村");
//展示如何在前门附近搜索小吃：
var local3 = new BMap.LocalSearch(map, {
renderOptions:{map: map, autoViewport: true}
});
local3.searchNearby("小吃", "前门");
//当前地图视野范围内搜索银行
var local4 = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});
local4.searchInBounds("银行", map.getBounds());
//数据接口将第一条方案的路线添加到地图上，并将所有方案的描述信息输出到页面上
var transit = new BMap.TransitRoute("北京市");
transit.setSearchCompleteCallback(function(results){
if (transit.getStatus() == BMAP_STATUS_SUCCESS){
var firstPlan = results.getPlan(0);
// 绘制步行线路
for (var i = 0; i <
firstPlan.getNumRoutes(); i ++){
var walk = firstPlan.getRoute(i);
if (walk.getDistance(false) > 0){
// 步行线路有可能为0
map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor:
"green"}));
}
}
// 绘制公交线路
for (i = 0; i <
firstPlan.getNumLines(); i ++){
var line = firstPlan.getLine(i);
map.addOverlay(new
BMap.Polyline(line.getPoints()));
}
// 输出方案信息
var s = [];
for (i = 0; i < results.getNumPlans(); i ++){
s.push((i + 1) + ". " + results.getPlan(i).getDescription());
}
document.getElementByIdx_x_x_x("info").innerHTML =
s.join("<BR>");
}
});
transit.search("中关村", "国贸桥");
//方案描述会自动展示到页面上
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map :
map,
panel : "results",
autoViewport: true
}
});
driving.search("中关村", "天安门");
var options = {
onSearchComplete: function(results){
if (driving.getStatus() ==
BMAP_STATUS_SUCCESS){
// 获取第一条方案
var plan = results.getPlan(0);
// 获取方案的驾车线路
var route =
plan.getRoute(0);
// 获取每个关键步骤，并输出到页面
var s = [];
for (var i = 0; i < route.getNumSteps(); i
++){
var step = route.getStep(i);
s.push((i + 1) + ". " + step.getDescription());
}
document.getElementByIdx_x_x_x("info2").innerHTML =
s.join("<BR>");
}
}
};
var driving1 = new BMap.DrivingRoute(map, options);
driving1.search("中关村", "天安门");
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
myGeo.getPoint("北京市海淀区上地10街10号", function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
}, "北京市");
</script>
