通过经纬度渲染路线
var points = [
{"lng": 120.28429, "lat":31.52853, "title":"无锡市"},
{"lng": 119.59794, "lat":31.72322, "title":"常州市"},
{"lng": 119.43396, "lat":32.13188, "title":"镇江市"},
{"lng": 119.88116, "lat":32.31841, "title":"泰州市"},
]
//在轨迹点上创建图标
function addMarker(points){ // 创建图标对象
// 创建标注对象并添加到地图
for(var i = 0,pointsLen = points.length;i <pointsLen;i++){
var point = new BMap.Point(points[i].lng,points[i].lat);
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(0, -32) //设置文本偏移量
}
var label = new BMap.Label(points[i].title, opts); // 创建文本标注对象
label.setStyle({
color : "#666",
fontSize : "12px",
height : "24px",
lineHeight : "24px",
fontFamily:"微软雅黑",
padding: '0 5px 0 15px',
background: '#fff',
border:'0',
borderRadius: '3px',
});
map.addOverlay(label);
// 由于生成的图标路径不对，暂时使用label代替marker创建图标
var iconOpts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(-12, -32) //设置文本偏移量
}
var labelIcon = new BMap.Label('', iconOpts); // 创建图标
if ( i < 1 ) {
labelIcon.setStyle({
width : '23px',
height : "32px",
lineHeight : "24px",
background: 'url("/homeStatic/images/map_icons.png") no-repeat -64px 0',
border:'0',
});
} else if ( i === points.length - 1 ) {
labelIcon.setStyle({
width : '23px',
height : "32px",
lineHeight : "24px",
background: 'url("/homeStatic/images/map_icons.png") no-repeat 0 0',
border:'0',
});
} else {
labelIcon.setStyle({
width : '23px',
height : "32px",
lineHeight : "24px",
background: 'url("/homeStatic/images/map_icons.png") no-repeat -32px 0',
border:'0',
});
}
map.addOverlay(labelIcon);
}
}
// 创建折线
function createPolyline (points) {
var allPonit = []
for (var i = 0,pointsLen = points.length;i <pointsLen;i++) {
allPonit[i] = new BMap.Point(points[i].lng,points[i].lat);
}
var polyline = new BMap.Polyline( allPonit, {strokeColor:"#ff6600", strokeWeight:6, strokeOpacity:1}); //定义折线
map.addOverlay(polyline); //添加折线到地图上
}
var map = new BMap.Map("container");
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// 根据经纬度自适应zoom和中点
var view = map.getViewport(eval(points));
var mapZoom = view.zoom;
var centerPoint = view.center;
map.centerAndZoom(centerPoint,mapZoom);
addMarker(points); // 绘制图标
createPolyline (points); // 绘制折线
通过城市名来渲染路线
var points = []
var adds = ['江苏省无锡市惠山区','江苏省常州市金坛市','江苏省泰州市姜堰县']
//在轨迹点上创建图标
function addMarker(points){ // 创建图标对象
// 创建标注对象并添加到地图
for(var i = 0,pointsLen = points.length;i <pointsLen;i++){
var point = new BMap.Point(points[i].lng,points[i].lat);
var opts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(0, -32) //设置文本偏移量
}
var label = new BMap.Label(points[i].title, opts); // 创建文本标注对象
label.setStyle({
color : "#666",
fontSize : "12px",
height : "24px",
lineHeight : "24px",
fontFamily:"微软雅黑",
padding: '0 5px 0 15px',
background: '#fff',
border:'0',
borderRadius: '3px',
});
map.addOverlay(label);
// 由于生成的图标路径不对，暂时使用label代替marker创建图标
var iconOpts = {
position : point, // 指定文本标注所在的地理位置
offset : new BMap.Size(-12, -32) //设置文本偏移量
}
var labelIcon = new BMap.Label('', iconOpts); // 创建图标
if ( i < 1 ) {
labelIcon.setStyle({
width : '23px',
height : "32px",
lineHeight : "24px",
background: 'url("./images/map_icons.png") no-repeat -64px 0',
border:'0',
});
} else if ( i === points.length - 1 ) {
labelIcon.setStyle({
width : '23px',
height : "32px",
lineHeight : "24px",
background: 'url("./images/map_icons.png") no-repeat 0 0',
border:'0',
});
} else {
labelIcon.setStyle({
width : '23px',
height : "32px",
lineHeight : "24px",
background: 'url("./images/map_icons.png") no-repeat -32px 0',
border:'0',
});
}
map.addOverlay(labelIcon);
}
}
// 创建折线
function createPolyline (points) {
var allPonit = []
for (var i = 0,pointsLen = points.length;i <pointsLen;i++) {
allPonit[i] = new BMap.Point(points[i].lng,points[i].lat);
}
var polyline = new BMap.Polyline( allPonit, {strokeColor:"#ff6600", strokeWeight:6, strokeOpacity:1}); //定义折线
map.addOverlay(polyline); //添加折线到地图上
}
// 批量地址解析
function bdGEO(){
if (index < adds.length) {
var add = adds[index];
geocodeSearch(add);
index++;
} else {
console.log(points)
setZoom(points);
addMarker(points); // 绘制图标
createPolyline (points); // 绘制折线
}
}
function geocodeSearch(add){
if(index < adds.length){
setTimeout(window.bdGEO,400);
}
myGeo.getPoint(add, function(point){
if (point) {
point.title = add;
points.push(point)
}
});
}
function getZoom (maxLng, minLng, maxLat, minLat) {
var zoom = ["50","100","200","500","1000","2000","5000","10000","20000","25000","50000","100000","200000","500000","1000000","2000000"]//级别18到3。
var pointA = new BMap.Point(maxLng,maxLat); // 创建点坐标A
var pointB = new BMap.Point(minLng,minLat); // 创建点坐标B
var distance = map.getDistance(pointA,pointB).toFixed(1); //获取两点距离,保留小数点后两位
for (var i = 0,zoomLen = zoom.length; i < zoomLen; i++) {
if(zoom[i] - distance > 0){
return 18-i+3;
//之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。
}
};
}
function setZoom(points){
if(points.length>0){
var maxLng = points[0].lng;
var minLng = points[0].lng;
var maxLat = points[0].lat;
var minLat = points[0].lat;
var res;
for (var i = points.length - 1; i >= 0; i--) {
res = points[i];
if(res.lng > maxLng) maxLng =res.lng;
if(res.lng < minLng) minLng =res.lng;
if(res.lat > maxLat) maxLat =res.lat;
if(res.lat < minLat) minLat =res.lat;
};
var cenLng =(parseFloat(maxLng)+parseFloat(minLng))/2;
var cenLat = (parseFloat(maxLat)+parseFloat(minLat))/2;
var zoom = getZoom(maxLng, minLng, maxLat, minLat);
map.centerAndZoom(new BMap.Point(cenLng,cenLat), zoom);
}else{
//没有坐标，显示全中国
map.centerAndZoom(new BMap.Point(103.388611,35.563611), 5);
}
}
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(117.269945,31.86713), 13);
map.enableScrollWheelZoom(true);
var index = 0;
var myGeo = new BMap.Geocoder();
bdGEO()
