關于百度地圖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); //根據提供的地理區(qū)域或坐標設置地圖視野游昼，調整后的視野會保證包含提供的地理區(qū)域或坐標
//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元素返回
// 在本方法中創(chuàng)建個div元素作為控件的容器,并將其添加到地圖容器中
StartControl.prototype.initialize = function(map) {
// 創(chuàng)建一個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元素返回
// 在本方法中創(chuàng)建個div元素作為控件的容器,并將其添加到地圖容器中
StopControl.prototype.initialize = function(map) {
// 創(chuàng)建一個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元素返回
// 在本方法中創(chuàng)建個div元素作為控件的容器,并將其添加到地圖容器中
RestartControl.prototype.initialize = function(map) {
// 創(chuàng)建一個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>
