在線預覽:http://qingshanboke.com/demo/baidumap.htm
效果圖:
代碼實現(具體看代碼註釋)
<!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">
.main {
width: 1024px;
margin: 10px auto;
position: relative;
}
#stylelist {
padding: 5px;
border: 1px solid #e3e3e3;
}
#allmap {
width: 1024px;
height: 600px;
overflow: hidden;
font-family: "微軟雅黑";
border: 1px solid #9E9E9E;
position: absolute;
top: 0;
left: 0;
}
#point,
#line {
width: 1024px;
height: 600px;
z-index: 100;
background: transparent;
position: absolute;
top: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jLZE4wcUhQKyFaDOGhBFcare"></script>
<title>地圖展示</title>
</head>
<body>
<div class="main">
地圖樣式:
<select id="stylelist" onchange="changeStyle()">
<option value="normal">默認地圖樣式</option>
<option value="light">清新藍風格</option>
<option value="dark">黑夜風格</option>
<option value="redalert">紅色警戒風格</option>
<option value="googlelite">精簡風格</option>
<option value="grassgreen">自然綠風格</option>
<option value="midnight" selected="selected">午夜藍風格</option>
<option value="pink">浪漫粉風格</option>
<option value="darkgreen">青春綠風格</option>
<option value="bluish">清新藍綠風格</option>
<option value="grayscale">高端灰風格</option>
<option value="hardedge">強邊界風格</option>
</select> </div>
<div class="main">
<div id="allmap"></div>
<canvas id="line" width="600" height="600"></canvas>
<canvas id="point" width="600" height="600"></canvas>
</div>
</body>
</html>
<script type="text/javascript">
// 百度地圖
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(104.077506, 30.655077), 9); //中心位置:成都
map.addControl(new BMap.MapTypeControl({
mapTypes: [
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
map.setCurrentCity("成都");
map.enableScrollWheelZoom(false);
var mapStyle = {
features: ["road", "building", "water", "land"],
style: "midnight",
};
map.setMapStyle(mapStyle);
//地圖樣式切換
function changeStyle() {
var stylectl = document.getElementById("stylelist");
var style = stylectl.options[stylectl.selectedIndex].value;
var mapStyle = {
features: ["road", "building", "water", "land"],
style: style,
};
map.setMapStyle(mapStyle);
switch (style) {
case "normal":
case "googlelite":
case "pink":
_linecolor = "#2196F3";
_titlecolor = "#FF5722";
break;
case "midnight":
case "redalert":
_linecolor = "#ffda4a";
_titlecolor = "#ff0";
break;
case "normal":
_linecolor = "#2196F3";
_titlecolor = "#FF5722";
break;
default:
_linecolor = "#FF9800";
break;
}
drawLine()
}
</script>
<script type="text/javascript">
var _linecolor = "#ffda4a";
var _titlecolor = "#ff0";
let _t = 0; //圓點滾動控制
//曲線1:成都->南充
var line1 = {
//成都
begin: {
x: 514,
y: 316
},
control1: {
x: 646,
y: 126
},
control2: {
x: 846,
y: 328
},
//南充
end: {
x: 958,
y: 251
},
};
//曲線2:內江->成都
var line2 = {
//內江
begin: {
x: 729,
y: 567
},
//成都
end: {
x: 514,
y: 316
},
control1: {
x: 666,
y: 333
},
control2: {
x: 508,
y: 528
},
};
//曲線3:雅安->成都
var line3 = {
//雅安
begin: {
x: 289,
y: 462
},
//成都
end: {
x: 514,
y: 316
},
control1: {
x: 391,
y: 293
},
control2: {
x: 389,
y: 402
},
};
//繪製曲線
function drawLine() {
let lineCanvas = document.getElementById("line");
let ctx = lineCanvas.getContext("2d");
lineCanvas.width = 1024;
lineCanvas.height = 600;
ctx.clearRect(0, 0, 1024, 600);
//左下角文字
ctx.beginPath();
ctx.moveTo(0, 580);
ctx.font = "18px bold 黑體";
ctx.fillStyle = _titlecolor;
ctx.fillText("流動人員人事檔案轉入轉出示意圖", 10, 30);
ctx.stroke();
ctx.closePath();
//曲線1:成都->南充
ctx.beginPath();
ctx.moveTo(line1.begin.x, line1.begin.y);
ctx.bezierCurveTo(line1.control1.x, line1.control1.y, line1.control2.x, line1.control2.y, line1.end.x, line1.end.y);
ctx.strokeStyle = _linecolor; //2196F3
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
//曲線2:內江->成都
ctx.beginPath();
ctx.moveTo(line2.begin.x, line2.begin.y);
ctx.bezierCurveTo(line2.control1.x, line2.control1.y, line2.control2.x, line2.control2.y, line2.end.x, line2.end.y);
ctx.strokeStyle = _linecolor; //FF9800
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
//曲線3:雅安->成都
ctx.beginPath();
ctx.moveTo(line3.begin.x, line3.begin.y);
ctx.bezierCurveTo(line3.control1.x, line3.control1.y, line3.control2.x, line3.control2.y, line3.end.x, line3.end.y);
ctx.strokeStyle = _linecolor;
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
}
drawLine();
//繪製某一時刻的點
function drawPoint(ctx, t, point1, text, textcolor) {
//根據三次貝塞爾曲線的公式,獲取某時刻t[0-1]的貝塞爾曲線上的點
let x = point1.begin.x * Math.pow((1 - _t), 3) + 3 * _t * point1.control1.x * Math.pow((1 - _t), 2) + 3 * point1.control2.x * Math.pow(_t, 2) * (1 - _t) + point1.end.x * Math.pow(_t, 3);
let y = point1.begin.y * Math.pow((1 - _t), 3) + 3 * _t * point1.control1.y * Math.pow((1 - _t), 2) + 3 * point1.control2.y * Math.pow(_t, 2) * (1 - _t) + point1.end.y * Math.pow(_t, 3);
//點移出曲線後,重新開始
let max_x = point1.end.x > point1.begin.x ? point1.end.x : point1.begin.x;
if (x > max_x) {
_t = 0;
x = point1.begin.x;
y = point1.begin.y;
}
ctx.beginPath();
//畫小圓點
ctx.moveTo(point1.begin.x, point1.begin.y);
ctx.arc(x, y, 4, 0, 2 * Math.PI, false);
ctx.fillStyle = "#e95b55";
ctx.fill();
//顯示文字
ctx.font = 'bold 12px Arial';
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
ctx.fillStyle = textcolor;
ctx.fillText(text, x, y - 12);
//顯示當前座標
//ctx.fillText("x:" + parseInt(x), x, y - 24);
//ctx.fillText("y:" + parseInt(y), x, y - 12);
ctx.closePath();
}
//繪製某一時刻的點,連續繪製形成動圖
function drawOneMoment() {
let pointCanvas = document.getElementById("point");
let ctx = pointCanvas.getContext("2d");
pointCanvas.width = 1024;
pointCanvas.height = 600;
//清除畫布
ctx.clearRect(0, 0, 1024, 600);
//逐個繪點
drawPoint(ctx, _t, line1, "轉出1000", '#0c79d0') //成都->南充
drawPoint(ctx, _t, line2, "轉入600", "orangered") //內江->成都
drawPoint(ctx, _t, line3, "轉入400", "orangered") //雅安->成都
_t += 0.01;
}
setInterval(drawOneMoment, 60);
</script>