爱华网
直接看下面代码即可：也可以访问百度地图api，里面说的更清楚：http://developer.baidu.com/map/
<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> <b ody> <divid="container"></div><divid="info"></div><divid="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 = newBMap.Icon("http://api.map.baidu.com/img/markers.png", newBMap.Size(23, 25), { offset: new BMap.Size(10,25), // 指定定位位置 imageOffset: newBMap.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){// 步行线路有可能为0map.addOverlay(new BMap.Polyline(walk.getPoints(), {lineColor:"green"}));}}// 绘制公交线路 for (i = 0; i <firstPlan.getNumLines(); i ++){var line = firstPlan.getLine(i);map.addOverlay(newBMap.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>
