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

(按钮)

(附近11)

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("

" +poi.title+ "

"); // 创建信息窗口对象

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;

原文：http://www.cnblogs.com/lvlina/p/6100828.html