1、進入百度地圖開發者平臺網站
進入web開發
2、註冊百度開發者賬號
3.閱讀開放平臺概述
4.創建應用
創建完成：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body,#map{width: 100%;height: 100%;}
</style>
<!--引入百度地圖API接口以及創建應用的AK-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=VU8AvenH7fZ4lf00DATgVDFf5GF5ZAwc"></script>
</head>
<body>
<!--地圖存放位置-->
<div id="map"></div>
</body>
<script src="js/UMap.js"></script>
<script src="js/baidu.js"></script>
</html>
//baidu.js文件
function init(){
//設置地圖的顯示類型 及縮放最小值
var opt={mapType:BMAP_NORMAL_MAP,minZoom:4};
var map=new BMap.Map('map',opt);
//初始化地圖
map.centerAndZoom("北京");
var center=new BMap.Point(116.519072,39.931867);
map.centerAndZoom(center,18);
//禁止拖拽
map.disableDragging();
//禁用雙擊放大
map.disableDoubleClickZoom();
//啓用滾輪放大縮小
map.enableScrollWheelZoom();
//右鍵啓用地圖拖拽
map.addEventListener('rightclick',function(){
map.enableDragging();
});
//創建定位控件 img/icon.jpg定位圖片
var location=new BMap.GeolocationControl({
locationIcon:new BMap.Icon('img/icon.jpg',new BMap.Size(50,50))
});
//控件位置右上角
location.setAnchor(BMAP_ANCHOR_TOP_RIGHT);
//控件偏移
location.setOffset(new BMap.Size(100,50));
map.addControl(location);
//右鍵雙擊隱藏/開啓控件
map.addEventListener("rightdblclick",function () {
location.isVisible()?location.hide():location.show();
});
//返回當前的定位信息，若當前還未定位，則返回nul
setTimeout(function(){
location.location();
console.log(location.getAddressComponent());
},3*1000);
//定位成功觸發事件
map.addEventListener("locationSuccess",function (result) {
console.log(result);
});
//地圖類型控件可選項
var mapTypeControl=new BMap.MapTypeControl({
type:BMAP_MAPTYPE_CONTROL_MAP,
mapTypes:[BMAP_NORMAL_MAP,BMAP_PERSPECTIVE_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP],
offset:new BMap.Size(5,80)
});
map.addControl(mapTypeControl);
//設置版權控件位置
var CopyrightControl = new BMap.CopyrightControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,
offset:new BMap.Size(100,20)
});
//添加版權控件
map.addControl(CopyrightControl);
//返回地圖可視區域
var getBounds= map.getBounds();
//Copyright(id,content,bounds)類作爲CopyrightControl.addCopyright()方法的參數
CopyrightControl.addCopyright({
id: 1,
content: "<a href='#' style='font-size:20px;background:red;color:white'>我是百度 我怕誰</a>",
bounds: getBounds
});
//全景控件
var PanoramaControl=new BMap.PanoramaControl()
map.addControl(PanoramaControl);
//實例化新創建的控件放到map上
var ScaleControl= new UMap.ScaleControl();
map.addControl(ScaleControl);
//創建自定義圖標代替大頭針
var icon = new BMap.Icon('img/baidu.png',new BMap.Size(40,40));
icon.setImageSize(new BMap.Size(40,40));
//創建大頭針標註
var marker = new BMap.Marker(center,{
icon:icon,
//微調大頭針箭頭指向誤差
offset:new BMap.Size(85,25)
});
map.addOverlay(marker);
//墜落動畫
marker.setAnimation(BMAP_ANIMATION_DROP);
//雙擊創建大頭針 像素座標 經緯度座標 互相轉換
map.addEventListener("dblclick",function (event) {
var icon = new BMap.Icon('img/baidu.png',new BMap.Size(40,40));
icon.setImageSize(new BMap.Size(40,40));
var marker = new BMap.Marker(event.point,{
icon:icon
});
//將setAnimation放到addOverlay後 創建大頭針跳動效果
map.addOverlay(marker);
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
});
}
init();//UMap.js文件 自定義控件
window.UMap = window.UMap || {};
(function() {
function ScaleControl() {
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(50, 50);
}
ScaleControl.prototype = new BMap.Control();
ScaleControl.prototype.initialize = function(map) {
//創建button按鈕
var container = document.createElement("div");
var maxButton = document.createElement('button');
var minButton = document.createElement('button');
maxButton.textContent='+';
minButton.textContent='-';
container.appendChild(maxButton);
container.appendChild(minButton);
maxButton.style.cssText = minButton.style.cssText = "font-size:20px;padding:2px 5px";
//點擊地圖放大或縮小
maxButton.onclick=minButton.onclick=function(){
this.textContent=='+'?map.zoomIn():map.zoomOut();
};
map.getContainer().appendChild(container);
return container;
};
UMap.ScaleControl = ScaleControl;
})();
實時定位
