实例1：画线画字
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>济南景点步行图</title> <style type="text/css"> #holder { width: 800px; height: 600px; background-color: pink; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tdPBKDSysoLON3V3f3k7z7p0"></script> </head> <body> <div id="holder"> </div> </body> </html> <script> var map = new BMap.Map('holder'); var point = new BMap.Point(117.030568, 36.667777); map.centerAndZoom(point, 14); map.enableScrollWheelZoom(); var places = [ {name: '大明湖', point: new BMap.Point(117.023669,36.679587)}, {name: '趵突泉', point: new BMap.Point(117.023238,36.667545)}, {name: '泉城广场', point: new BMap.Point(117.028124,36.66743)}, {name: '植物园', point: new BMap.Point(117.027981,36.653996)}, {name: '千佛山', point: new BMap.Point(117.03488,36.650985)} ]; var polyline = new BMap.Polyline([ places[0].point, places[1].point, places[2].point, places[3].point, places[4].point ], {strokeColor: 'purple', strokeWeight: 5, strokeOpacity: .5}); map.addOverlay(polyline); var style = { color: 'red', fontSize: '12px', height: '20px', lineHeight: '20px', fontFamily: '微软雅黑' }; var label0 = new BMap.Label(places[0].name, {position: places[0].point}); var label1 = new BMap.Label(places[1].name, {position: places[1].point}); var label2 = new BMap.Label(places[2].name, {position: places[2].point}); var label3 = new BMap.Label(places[3].name, {position: places[3].point}); var label4 = new BMap.Label(places[4].name, {position: places[4].point}); label0.setStyle(style); label1.setStyle(style); label2.setStyle(style); label3.setStyle(style); label4.setStyle(style); map.addOverlay(label0); map.addOverlay(label1); map.addOverlay(label2); map.addOverlay(label3); map.addOverlay(label4); </script>