关于百度地图API的调用
1.引用百度API，注册自己的key
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=h3vKREEs4sNt2YKxk9ZB0TZ0"></script>
<%--使用LuShu2，LuShu.js不可，图形不会跟随方向转--%>
<script src="../../CommonNew/js/LuShu2.js" type="text/javascript"></script>
2.添加到页面上
<div id="map_canvas"></div>
3.对地图的操作
<script type="text/javascript">
var winWidth = 0;
var winHeight = 0;
function findDimensions() { //函数：获取尺寸
//获取窗口宽度
if (window.innerWidth) {
winWidth = window.innerWidth;
}
else if ((document.body) && (document.body.clientWidth)) {
winWidth = document.body.clientWidth;
}
//获取窗口高度
if (window.innerHeight) {
winHeight = window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//设置div的具体宽度=窗口的宽度的%
if (document.getElementById("map_canvas")) {
//document.getElementById("map").style.width = winWidth*0.98 + "px";
document.getElementById("map_canvas").style.height = winHeight * 0.98 + "px";
}
}
findDimensions();
window.onresize = findDimensions;
var map = new BMap.Map('map_canvas');
map.enableScrollWheelZoom();
map.centerAndZoom(new BMap.Point(116.403847, 39.915526), 5); // 初始化地图,设置中心点坐标和地图级别
var lushu;
var arrPois = []; //坐标点数组
var markPois = []; //坐标点显示信息窗数组
function GetLuShu() {
map.clearOverlays();
lushu = new BMapLib.LuShu(map, arrPois, {
defaultContent: "test", //"从天安门到百度大厦"
autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
icon: new BMap.Icon('../../Common/Image/icon_track_car.png', new BMap.Size(40, 20), { anchor: new BMap.Size(27, 13) }),
speed: 8000,
enableRotation: true, //是否设置marker随着道路的走向进行旋转
landmarkPois: markPois
});
map.addOverlay(new BMap.Polyline(arrPois, { strokeColor: '#111' }));
map.setViewport(arrPois); //根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标
//lushu.start();
}
// 定义一个开始轨迹回放控件类,即function
function StartControl() {
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(130, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
StartControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
StartControl.prototype.initialize = function(map) {
// 创建一个DOM元素
var div = document.createElement("divStart");
// 添加文字说明
div.appendChild(document.createTextNode("开始"));
// 设置样式
div.style.fontSize = "14px";
div.style.padding = "2px";
div.style.color = "white";
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "#1e90ff";
div.style.right = "100px";
div.style.borderRadius = "6px";
// 绑定开始事件
div.onclick = function(e) {
lushu.start();
lushu.showInfoWindow();
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 定义一个暂停轨迹回放控件类,即function
function StopControl() {
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(90, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
StopControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
StopControl.prototype.initialize = function(map) {
// 创建一个DOM元素
var div = document.createElement("divStop");
// 添加文字说明
div.appendChild(document.createTextNode("暂停"));
// 设置样式
div.style.fontSize = "14px";
div.style.padding = "2px";
div.style.color = "white";
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "#d81e06";
div.style.right = "50px";
div.style.borderRadius = "6px";
// 绑定开始事件
div.onclick = function(e) {
lushu.pause();
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 定义一个暂停轨迹回放控件类,即function
function RestartControl() {
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(20, 10);
}
// 通过JavaScript的prototype属性继承于BMap.Control
RestartControl.prototype = new BMap.Control();
// 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
RestartControl.prototype.initialize = function(map) {
// 创建一个DOM元素
var div = document.createElement("divRestart");
// 添加文字说明
div.appendChild(document.createTextNode("重新开始"));
// 设置样式
div.style.padding = "2px";
div.style.fontSize = "14px";
div.style.color = "white";
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "#0b988f";
div.style.borderRadius = "6px";
// 绑定开始事件
div.onclick = function(e) {
lushu.stop();
lushu.start();
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
map.addControl(new BMap.NavigationControl());
// 将自定义控件添加到地图当中
map.addControl(new StartControl());
// 将自定义控件添加到地图当中
map.addControl(new StopControl());
// 将自定义控件添加到地图当中
map.addControl(new RestartControl());
</script>
网友评论