百度地图API-创建多个坐标，连线，信息提示

这是一个多坐标创建，并连线，和信息显示的例子
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>
    <title></title>
</head>
<body>
    <div>
 
            <div style="min-height: 800px; width: 100%;" id="map">
            </div>
            <script type="text/javascript">
                var map; //Map实例
                //后台传过来
                var currentLat = 116.345555;
                var currentLon = 40.018661;
                var my = { title: "我的位置" };
                var markerArr = [
                    { title: "1", point: "116.364531,40.057003",name:"这是一个标题", content:"这是内容" },
                    { title: "2", point: "116.340934,40.013401", name: "这是一个标题", content: "这是内容" },
                    { title: "3", point: "116.342213,40.041267", name: "这是一个标题", content: "这是内容" },
                    { title: "4", point: "116.342223,40.042267", name: "这是一个标题", content: "这是内容" },
                    { title: "5", point: "116.342233,40.043267", name: "这是一个标题", content: "这是内容"},
                 
                ];
 
                function map_init() {
                    map = new BMap.Map("map");
                    //第1步：设置地图中心点，当前城市
                    var point = new BMap.Point(currentLat, currentLon);
                    //第2步：初始化地图,设置中心点坐标和地图级别。
                    map.centerAndZoom(point, 14);
                    //第3步：启用滚轮放大缩小
                    map.enableScrollWheelZoom(true);
                    //第4步：向地图中添加缩放控件
                    var ctrlNav = new window.BMap.NavigationControl({
                        anchor: BMAP_ANCHOR_TOP_LEFT,
                        type: BMAP_NAVIGATION_CONTROL_LARGE
                    });
                    map.addControl(ctrlNav);
                    //第5步：向地图中添加缩略图控件
                    var ctrlOve = new window.BMap.OverviewMapControl({
                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                        isOpen: 1
                    });
                    map.addControl(ctrlOve);
 
                    //第6步：向地图中添加比例尺控件
                    var ctrlSca = new window.BMap.ScaleControl({
                        anchor: BMAP_ANCHOR_BOTTOM_LEFT
                    });
                    map.addControl(ctrlSca);
 
 
                    //第7步：绘制点
                    for (var i = 0; i < markerArr.length; i++) {
                        var p0 = markerArr[i].point.split(",")[0];
                        var p1 = markerArr[i].point.split(",")[1];
                        var maker = addMarker(new window.BMap.Point(p0, p1), i);
                        addInfoWindow(maker, markerArr[i], markerArr[i].name, markerArr[i].content);
                    }
                    //绘制点
                    var points = new Array();
                    for (var i = 0; i < markerArr.length; i++) {
                        var p0 = markerArr[i].point.split(",")[0];
                        var p1 = markerArr[i].point.split(",")[1];
                        var thePoint1 = new BMap.Point(p0, p1);
                        points.push(thePoint1);
                    }
                    drawPolyline(map, points);
 
                    // 添加信息窗口
                    function addInfoWindow(marker, poi,name, content) {
                        // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                        var label = new window.BMap.Label(poi.title, { offset: new window.BMap.Size(2, 1) });
                        marker.setLabel(label);
                        var clo = "";
                        if ("我的位置" == poi.title) {
                            clo = "#FF5782";
                        } else {
                            clo = "#E6FED";
                        }
                        label.setStyle({
                            color: "#fff",
                            fontSize: "16px",
                            backgroundColor: "0.05",
                            border: "0",
                            fontWeight: "bold"
                        });
                        //maps.addOverlay(lab1);
 
                        addClickHandler(name,content, marker);
                    }
                }
                function addClickHandler(name,content, marker) {
                    marker.addEventListener("click", function (e) {
                        openInfo(name,content, e)
                    }
                    );
                }
                function openInfo(name,content, e) {
                    var opts = {
                        width: 250,     // 信息窗口宽度
                        height: 80,     // 信息窗口高度
                        title: name, // 信息窗口标题
                        enableMessage: true//设置允许信息窗发送短息
                    };
                    var p = e.target;
                    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
                    var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象 
                    map.openInfoWindow(infoWindow, point); //开启信息窗口
                }
                // 添加标注
                function addMarker(point, index) {
                    index = 11;
                    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);
                    return marker;
                }
                //异步调用百度js
                function map_load() {
                    map_init();
                }
 
                /**
                 * 画线
                 */
                function drawPolyline(bMap, points) {
                    if (points == null || points.length <= 1) {
                        return;
                    }
                    bMap.addOverlay(new BMap.Polyline(points, {
                        strokeColor: "blue",
                        strokeWeight: 3,
                        strokeOpacity: 0.6
                    })); // 画线
 
                }
 
                window.onload = map_load;
            </script>
    </div>
</body>
</html>