<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>驾车途经点</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<style type="text/css">
.triangle{
/*css画三角*/
width: 0;
height: 0;
border-top: 8px solid blue;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
position: relative;
top: -2px;
left: 2px;
}
.triangle:hover{
border-top-color: blue;
}
.markerPlan{
color:#ffffff;
text-align: center;
border:1px solid #ffffFF;
font-size: 10px;
line-height: 18px;
font-weight: bold;
}
.markerPlan:hover{
background-color: blue;
}
.curPoints {
/*绑定动画 动画名 动画时长 运动方式*/
animation:mymove 2s infinite;
-moz-animation:mymove 2s infinite; /* Firefox */
-webkit-animation:mymove 2s infinite; /* Safari and Chrome */
-o-animation:mymove 2s infinite; /* Opera */
}
.triangles{
animation:trianglemove 2s infinite;
-moz-animation:trianglemove 2s infinite; /* Firefox */
-webkit-animation:trianglemove 2s infinite; /* Safari and Chrome */
-o-animation:trianglemove 2s infinite; /* Opera */
}
/*keyframes 命名动画名*/
/*运动帧*/
@keyframes trianglemove
{
from {border-top: 8px solid red;}
to {border-top: 8px solid blue;}
}
@-moz-keyframes trianglemove /* Firefox */
{
from {border-top: 8px solid red;}
to {border-top: 8px solid blue;}
}
@-webkit-keyframes trianglemove /* Safari and Chrome */
{
from {border-top: 8px solid red;}
to {border-top: 8px solid blue;}
}
/*keyframes 命名动画名*/
/*运动帧*/
@keyframes mymove
{
from {background:red;}
to {background:blue;}
}
@-moz-keyframes mymove /* Firefox */
{
from {background:red;}
to {background:blue;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {background:red;}
to {background:blue;}
}
@-o-keyframes mymove /* Opera */
{
from {background:red;}
to {background:blue;}
}
</style>
</head>
<body>
<p><input type='button' value='开始' onclick='run();' /></p>
<div style="width:820px;height:500px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var address=[];
var current={log:104.07524,lat:30.657582,address:'成都'}
var allPoint=[
{log:106.521436,lat:29.532288,address:'重庆'},
{log:108.983569,lat:34.285675,address:'西安'},
{log:116.404449,lat:39.920423,address:'北京'},
{log:104.07524,lat:30.657582,address:'成都'},
{log:104.807888,lat:29.361749,address:'自贡'},
{log:104.679265,lat:31.474596,address:'绵阳'},
{log:110.314923,lat:20.049305,address:'海南'},
{log:102.713847,lat:25.052346,address:'云南'},
{log:105.447942,lat:28.87783,address:'泸州'},
{log:111.754575,lat:40.85519,address:'内蒙'},
{log:126.654555,lat:45.770043,address:'黑龙江'},
{log:87.578382,lat:43.862106,address:'新疆'}
];
for(var i=0;i<allPoint.length;i++){
address.push(new BMap.Point(allPoint[i].log,allPoint[i].lat))
}
var opts = {
width : 250, // 信息窗口宽度
height: 80, // 信息窗口高度
title : "信息窗口" , // 信息窗口标题
enableMessage:true//设置允许信息窗发送短息
};
window.run = function (){
map.clearOverlays(); //清除地图上所有的覆盖物
var driving = new BMap.DrivingRoute(map); //创建驾车实例
for(var j=0;j<address.length;j++){
if(address[j+1]){
driving.search(address[j],address[j+1]); //驾车搜寻地点
}
}
var index=0;
driving.setSearchCompleteCallback(function(){
index++;
var pts = driving.getResults().getPlan(0).getRoute(0).getPath();
//通过驾车实例，获得一系列点的数组
var polyline = new BMap.Polyline(pts,{strokeColor:"blue", strokeWeight:4, strokeOpacity:0.5});
map.addOverlay(polyline);
for(var k=0;k<address.length;k++){
if(index==1){
var m=k+1;
var curId='';
var thereId='';
if(allPoint[k].log==current.log){
// m1.setAnimation(BMAP_ANIMATION_BOUNCE);
curId='curPoints';
thereId='triangles'
}
// 添加自定义覆盖物
var m1 = '';
if(k==0){
m1=new SquareOverlay(address[k], 20, "#12ff5e",'起',curId,thereId);
}else if(k==address.length-1){
m1=new SquareOverlay(address[k], 20, "blue",'终',curId,thereId)
}else{
m1=new SquareOverlay(address[k], 20, "red",m,curId,thereId)
}
lab1 = new BMap.Label("("+m+")"+allPoint[k].address,{position:address[k]});
map.addOverlay(lab1); //添加描述
map.addOverlay(m1);
m1.listener(address[k],allPoint[k].address); //监听事件 添加信息框
}
}
setTimeout(function(){map.setViewport(address);},1000); //调整地图视野
});
};
function openInfo(point,content){
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
// 定义自定义覆盖物的构造函数
function SquareOverlay(center, length,color,number,id,thereId){
this._center = center; //坐标中心点
this._length = length; //ele宽度及高度
this._color = color; //背景颜色
this._number=number; //标注序号
this._id=id; //当前选中标注
this._thereId=thereId //当前选中标注
}
// 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay();
// 实现初始化方法
SquareOverlay.prototype.initialize = function(map){
// 保存map对象实例
this._map = map;
// 创建div元素，作为自定义覆盖物的容器
var div = document.createElement("div");
div.style.position = "absolute";
// 可以根据参数设置元素外观
div.style.width = this._length + "px";
div.style.height = this._length + "px";
div.style.background = this._color;
div.innerHTML=this._number;
div.style.borderRadius=this._length+'px';
div.className=this._id+" markerPlan";
//倒三角样式
var div2=document.createElement("div");
div2.className=this._thereId+" triangle";
div2.style.borderTop="8px solid "+this._color;
div.appendChild(div2);
// 将div添加到覆盖物容器中
map.getPanes().markerPane.appendChild(div);
// 保存div实例
this._div = div;
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、
// hide方法，或者对覆盖物进行移除时，API都将操作此元素。
return div;
}
// 实现绘制方法
SquareOverlay.prototype.draw = function(){
// 根据地理坐标转换为像素坐标，并设置给容器
var position = this._map.pointToOverlayPixel(this._center);
this._div.style.left = position.x - this._length / 2 + "px";
this._div.style.top = position.y - this._length / 2 + "px";
}
// 实现显示方法
SquareOverlay.prototype.show = function(){
if (this._div){
this._div.style.display = "";
}
}
// 实现隐藏方法
SquareOverlay.prototype.hide = function(){
if (this._div){
this._div.style.display = "none";
}
}
// 添加自定义方法
SquareOverlay.prototype.toggle = function(){
if (this._div){
if (this._div.style.display == ""){
this.hide();
}
else {
this.show();
}
}
}
SquareOverlay.prototype.addEventListener = function(event,fun){
this._div['on'+event] = fun;
}
SquareOverlay.prototype.listener=function(point,content){ //添加监听事件
this._div.addEventListener("click",function(){
openInfo(point,content)
})
}
</script>
浙公网安备 33010602011771号