复制出以下代码至xxx.html文件 自测
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>全插件</title><script type="text/javascript" src="><script type="text/javascript" src="></head><body><div style="width:520px;height:340px;border:1px solid gray" id="container"></div><input type="button" value="开启测距" οnclick="myDis.open();" /><input type="button" value="关闭测距" οnclick="myDis.close()" /><div id="results" style="font-size:13px;margin-top:10px;"></div></body>
</html><script type="text/javascript">//map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件//map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));//地图|卫星|三维 控件//map.setCurrentCity("济南");//百度map API var map = new BMap.Map("container"); // 创建Map实例var point = new BMap.Point(117.025, 36.666); // 创建点坐标var myDis = new BMapLib.DistanceTool(map); //测距插件
map.centerAndZoom(point,13); // 初始化地图,设置中心点坐标和地图级别。map.enableScrollWheelZoom(); // 启用滚轮放大缩小。map.enableKeyboard(); // 启用键盘操作。map.addControl(new BMap.ScaleControl()); // 添加比例尺控件map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件var opts = {type: BMAP_NAVIGATION_CONTROL_SMALL} // 添加平移缩放控件(个性化)map.addControl(new BMap.NavigationControl(opts));// 添加平移缩放控件(个性化)map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));//地图|混合 控件//=======================================var contextMenu = new BMap.ContextMenu();//创建右键对象var txtMenuItem = [ { text:'折线测距',callback:function(){myDis.open()}}, { text:'在此添加标注', callback:function(p){ var marker = new BMap.Marker(p), px = map.pointToPixel(p); map.addOverlay(marker); } } ];for(var i=0; i < txtMenuItem.length; i++){ contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100)); if(i==1 || i==3) { contextMenu.addSeparator(); }}map.addContextMenu(contextMenu); //===================开始 结束 测距 start===================var transit = new BMap.DrivingRoute(map, { renderOptions: {map: map,panel: "results", autoViewport: true}, onMarkersSet: function(pois){ var start = pois[0].marker, end = pois[1].marker; start.enableDragging();//开启起点拖拽功能 end.enableDragging();//开启终点拖拽功能 start.addEventListener("dragend",function(e){ map.clearOverlays(); transit.search(e.point,end.getPosition()); }); end.addEventListener("dragend",function(e){ map.clearOverlays(); transit.search(start.getPosition(),e.point); }); }});transit.search("泉城广场","洪家楼");//===================开始 结束 测距 end ===================//默认红色标注
//var marker = new BMap.Marker(new BMap.Point(116.987, 36.666)); // 创建标注//map.addOverlay(marker); // 将标注添加到地图中//var myPushpin = new BMap.PushpinTool(map); // 创建标注工具实例
//myPushpin.addEventListener("markend", function(e){ // 监听事件，提示标注点坐标信息// alert("您标注的位置："+e.marker.getPoint().lng+","+e.marker.getPoint().lat);//获取坐标// alert("您标注的位置："+e.point.lng+","+e.point.lat);//另一种获取坐标//}); //myPushpin.open();//var myP1 = new BMap.Point(117.025, 36.666); //起点
//var myP2 = new BMap.Point(117, 36.666); //终点//var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}}); //驾车实例
//driving2.search(myP1, myP2); //显示一条公交线路//创建小狐狸//var pt = new BMap.Point(116.991, 36.666);//var myIcon = new BMap.Icon("", new BMap.Size(300,157));//var marker = new BMap.Marker(pt,{icon:myIcon}); // 创建标注//map.addOverlay(marker); // 将标注添加到地图中//让小狐狸说话（创建信息窗口）
//var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈，你看见我啦！我可不常出现哦！</p>");//marker.addEventListener("click", function(){this.openInfoWindow(infoWindow);});//marker.enableDragging(true); // 设置标注可拖拽 </script>