百度地圖API JS呼叫例項
阿新 • • 發佈:2019-01-05
function AddMap(){
//設定地圖容器高度
var screenH=window.innerHeight;
var headerH=this.elById("icon_header").offsetHeight;
this.elById("map_show").style.height=screenH-headerH+"px";
}
/**
* @param el 地圖初始化容器
* @param p 初始化座標點
*/
AddMap.prototype.init=function (el,p){
var point={
lng:116.404113,
lat:39.914965
};
if(p && p.lng && p.lat){
point.lng=p.lng;
point.lat=p.lat;
}
this.m = new BMap.Map(el); //例項化地圖
this.p = new BMap.Point(point.lng,point.lat);
this .m.enableContinuousZoom(); //啟用地圖慣性拖拽
this.m.enableScrollWheelZoom(); //啟用滾輪放大縮小
this.m.centerAndZoom(this.p, 12); //設定地圖顯示中間點、地圖顯示級別
this.addMaker(this.p);
this.search(); //搜尋
this.getLocation();
};
//獲取座標點位置
AddMap.prototype.getLocation=function (){
var _this=this;
var confirm=this.elById("confirm_location");
confirm.addEventListener("click",function(){
var makerPoint=_this.makerPoint();
console.log(makerPoint)
});
};
AddMap.prototype.elById=function(id) {
return document.getElementById(id);
};
//新增座標顯示
AddMap.prototype.addMaker=function(location){
var mk = new BMap.Marker(location);
mk.enableDragging(); //marker可拖拽
mk.enableMassClear();
this.m.addOverlay(mk); //在地圖中新增marker
this.makerPoint=function(){
return mk.getPosition(); //返回當前座標
};
};
//搜尋
AddMap.prototype.search=function(){
var _this=this;
var ac = new BMap.Autocomplete( //建立一個自動完成的物件
{
"input" : "suggestId",
"location" : _this.m
}
);
ac.addEventListener("onconfirm", function(e) { //滑鼠點選下拉列表後的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
_this.elById("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
_this.setPlace(_this.m);
});
};
//定位到具體位置
AddMap.prototype.setPlace=function(m){
var _this=this;
m.clearOverlays(); //清除地圖上所有覆蓋物
function myFun(){
var pp = local.getResults().getPoi(0).point; //獲取第一個智慧搜尋的結果
m.centerAndZoom(pp, 15); //設定地圖顯示中間點、地圖顯示級別
_this.addMaker(pp);
}
var local = new BMap.LocalSearch(m, { //智慧搜尋
onSearchComplete: myFun
});
local.search(myValue);
};
var mapInclude=new AddMap();
//初始化地圖
//需傳入容器DOM(id),可傳座標點定位
mapInclude.init("map_show",{lng:104.072247,lat:30.663436});