百度地图显示多点连线+数字标注 -

anlinko

浏览: 43952 次
性别:
来自: 深圳

最近访客更多访客>>

limengna845567

jiviang

私奔长安

无花果

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

百度地图显示多点连线+数字标注

博客分类：

百度地图

百度地图

百度地图显示多点连线+数字标注


<!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>