百度自定义覆盖

最新推荐文章于 2022-09-07 16:21:54 发布

wu_jing_sheng0

最新推荐文章于 2022-09-07 16:21:54 发布

阅读量806

点赞数

文章标签： baidu map 自定义覆盖

本文链接：https://blog.csdn.net/wu_jing_sheng0/article/details/40619909

版权

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Track</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#controller{width:100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=百度key"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<script type="text/javascript">
//获取所有点的坐标
var points = [
new BMap.Point(114.00100, 22.550000), new BMap.Point(114.00130, 22.550000),
new BMap.Point(114.00160, 22.550000), new BMap.Point(114.00200, 22.550000),
new BMap.Point(114.00300, 22.550500), new BMap.Point(114.00400, 22.550000),
new BMap.Point(114.00500, 22.550000), new BMap.Point(114.00505, 22.549800),
new BMap.Point(114.00510, 22.550000), new BMap.Point(114.00515, 22.550000),
new BMap.Point(114.00525, 22.550400), new BMap.Point(114.00537, 22.549500)
];

var map; //百度地图对象
var car; //汽车图标
var label; //信息标签
var centerPoint;

var timer; //定时器
var index = 0; //记录播放到第几个point

var followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮

function init() {
followChk = document.getElementById("follow");
playBtn = document.getElementById("play");
pauseBtn = document.getElementById("pause");
resetBtn = document.getElementById("reset");

//初始化地图,选取第一个点为起始点
map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(100.00100, 25.550000), 15);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl({isOpen: true}));

//通过DrivingRoute获取一条路线的point
var driving = new BMap.DrivingRoute(map);
driving.search(new BMap.Point(114.00100, 22.550000), new BMap.Point(113.95100, 22.550000));
driving.setSearchCompleteCallback(function() {
//得到路线上的所有point
points = driving.getResults().getPlan(0).getRoute(0).getPath();
//画面移动到起点和终点的中间
centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);
map.panTo(centerPoint);
//连接所有点
map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));

//显示小车子
label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});
car = new BMap.Marker(points[0], {icon: new BMap.Icon("car.png", new BMap.Size(48, 48), {imageOffset: new BMap.Size(0, 0)})});
car.setLabel(label);
map.addOverlay(car);

//点亮操作按钮
playBtn.disabled = false;
resetBtn.disabled = false;
});
var sContent="<div>显示信息</div>";

var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300,157));
//var marker2 = new BMap.Marker(new BMap.Point(100.00100, 25.550000),{icon:myIcon}); // 创建标注
//map.addOverlay(marker2);
var marker = new ComplexCustomOverlayCar(new BMap.Point(100.00100, 25.550000), "Cardddd",sContent,"red","Car","","",30);
map.addOverlay(marker);

var zsIcon = new BMap.Icon("http://ui-love.com/baidumap/bank/marker.gif", //图片地址
new BMap.Size(40, 64), // 标注显示大小
{
offset: new BMap.Size(20, 64), // 标注底部小尖尖的偏移量
imageOffset: new BMap.Size(0, 0) // 这里相当于CSS sprites
});
var pointMarker1 = new BMap.Point(116.402849,39.914561); // 创建招商银行标注的坐标
var marker1 = new BMap.Marker(pointMarker1, {icon: zsIcon}); // 创建招商银行标注
var infoWindow1 = new BMap.InfoWindow("你点击了招商银行的标注",{offset: new BMap.Size(0, -64)});
marker1.addEventListener("click", function(){ //给招商银行标注添加点击事件
this.openInfoWindow(infoWindow1); //打开招商银行的窗口
});
var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101), "天安门东");
var myCompOverlay2 = new ComplexCustomOverlay(new BMap.Point(116.406946,39.911403), "国家博物馆");

mp.addOverlay(myCompOverlay);
mp.addOverlay(myCompOverlay2);
mp.addOverlay(marker1); // 将招商银行标注添加到地图

}

function play() {
playBtn.disabled = true;
pauseBtn.disabled = false;

var point = points[index];
if(index > 0) {
map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));
}
label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat);
car.setPosition(point);
index++;
if(followChk.checked) {
map.panTo(point);
}
if(index < points.length) {
timer = window.setTimeout("play(" + index + ")", 200);
} else {
playBtn.disabled = true;
pauseBtn.disabled = true;
map.panTo(point);
}
}

function pause() {
playBtn.disabled = false;
pauseBtn.disabled = true;

if(timer) {
window.clearTimeout(timer);
}
}

function reset() {
followChk.checked = false;
playBtn.disabled = false;
pauseBtn.disabled = true;

if(timer) {
window.clearTimeout(timer);
}
index = 0;
car.setPosition(points[0]);
map.panTo(centerPoint);
}

//添加车辆位置信息
function ComplexCustomOverlayCar(point,text,sContent,color,title,isStart,isEnd,Angle){
this._point = point;
this._text = text;
this._sContent=sContent;
this._color=color;
this._title=title;
this._isStart=isStart;
this._isEnd=isEnd;
this._isAngle=Angle;
}
ComplexCustomOverlayCar.prototype = new BMap.Overlay();
ComplexCustomOverlayCar.prototype.initialize = function(map){
var searchInfoWindowCar = new BMapLib.SearchInfoWindow(map, this._sContent, {
title : this._title, //标题
width : 32, //宽度
height : 32, //高度
panel : "panel",
background : "car.png",
enableAutoPan : true, //自动平移
searchTypes :[]
});
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.cursor="pointer";
div.style.width="96";
div.style.height="96";
//div.style.backgroundImage="url(car.png)";
div.style.background="url('car.png') no-repeat;width:100px;height:50px";
var bigImg = document.createElement("img"); //创建一个img元素
bigImg.width="48"; //200个像素不用加px
bigImg.height="48";
bigImg.src="car.png"; //给img元素的src属性赋值

div.appendChild(bigImg);
var span = this._span = document.createElement("span");
span.style.position = "absolute";
span.left=div.left-36;
span.top=div.top;
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
var that= this;
div.onmouseover = function(){

//打开悬浮曾
searchInfoWindowCar.open(new BMap.Marker(that._point));
};
div.onmouseout = function(){

//关闭悬浮层
searchInfoWindowCar.close(new BMap.Marker(that._point));
};

map.getPanes().labelPane.appendChild(div);

return div;
};
ComplexCustomOverlayCar.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x-36+"px";
this._div.style.top = pixel.y+ "px";
};
function ComplexCustomOverlay(point, text, mouseoverText){
this._point = point;
this._text = text;
this._overText = mouseoverText;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#EE5D5B";
div.style.border = "1px solid #BC3B3A";
div.style.color = "white";
div.style.height = "18px";
div.style.padding = "2px";
div.style.lineHeight = "18px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px"
var span = this._span = document.createElement("span");
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
var that = this;

var arrow = this._arrow = document.createElement("div");
//http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png
arrow.style.background = "url(car.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "22px";
arrow.style.left = "10px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);

div.onmouseover = function(){
this.style.backgroundColor = "#6BADCA";
this.style.borderColor = "#0000ff";
this.getElementsByTagName("span")[0].innerHTML = that._overText;
arrow.style.backgroundPosition = "0px -20px";
}

div.onmouseout = function(){
this.style.backgroundColor = "#EE5D5B";
this.style.borderColor = "#BC3B3A";
this.getElementsByTagName("span")[0].innerHTML = that._text;
arrow.style.backgroundPosition = "0px 0px";
}

mp.getPanes().labelPane.appendChild(div);

return div;
}
ComplexCustomOverlay.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
var txt = "银湖海岸城", mouseoverTxt = txt + " " + parseInt(Math.random() * 1000,10) + "套" ;

var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101), "银湖海岸城",mouseoverTxt);

mp.addOverlay(myCompOverlay);
</script>
</head>

<body οnlοad="init();">
<div id="controller" align="center">
<input id="follow" type="checkbox"><span style="font-size:12px;">画面跟随</span></input>
<input id="play" type="button" value="播放" οnclick="play();" disabled />
<input id="pause" type="button" value="暂停" οnclick="pause();" disabled />
<input id="reset" type="button" value="重置" οnclick="reset()" disabled />
</div>
<div id="container"></div>
</body>
</html>