百度地图多点+画连接线+数字标注

klo0704

浏览: 142399 次
性别:
来自: 西安

最近访客更多访客>>

hs117

zhangmin53

renjie_c

zhangyawen1028

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
    <title>（按钮）</title>
</head>
<body >
    <div>
        <fieldset >
                     （附近11）
        </fieldset>
        <fieldset>
            <div style="min-height: 400px; 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"},
                    { title: "2",point: "116.340934,40.013401"},
                    { title: "3", point: "116.342213,40.041267"},
     { title: "4", point: "116.342223,40.042267"},
     { title: "5", point: "116.342233,40.043267"},
     { title: "6", point: "116.352243,40.044267"},
     { title: "7", point: "116.342253,40.045267"},
     { title: "8", point: "116.342263,40.046267"},
     { title: "9", point: "116.342273,40.047267"},
     { title: "10", point: "116.342283,40.087267"},
     { title: "11", point: "116.342293,40.097267"},
     { title: "12", point: "116.442203,40.007267"}
                ];

                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]);
                     }
      //绘制点
      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) {
                         // 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);

                          var info = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;color:"+clo+";’>" +poi.title+ "</p>"); // 创建信息窗口对象
                      marker.addEventListener("mouseover", openInfoWinFun);
                       var openInfoWinFun = function () {
                           this.openInfoWindow(info);
                       };
                  }
                }

                // 添加标注
                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() {
                    var load = document.createElement("script");
                    load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
                    document.body.appendChild(load);
                }

     /**
      * 画线
      * @param bMap
      * @param points
      */
     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>
        </fieldset>
    </div>
</body>
</html>