百度地圖API ajax非同步獲取資料庫資訊 頁面顯示多點標註和標註框
阿新 • • 發佈:2019-02-07
var map = new BMap.Map("allmap"); // 建立地圖例項
var point = new BMap.Point(108.955665, 34.274037); // 建立點座標
map.centerAndZoom(point, 15); // 初始化地圖,設定中心點座標和地圖級別
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
$(function(){
$.ajax({
url:"${pageContext.request.contextPath }/yeeving/getTCiwsYeeving",
type:"get",
success:function(result){
var lng = result.extend.tCiwsYeevingList[0].longitude;
var lat = result.extend.tCiwsYeevingList[0].lat;
console.log(result);
//var point = new BMap.Point(108.95394, 34.27165);
$.each(result.extend.tCiwsYeevingList,function(index,item){
var point = new BMap.Point(item.longitude,item.lat);
var content = item.address;
console.log(content);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 建立標註
map.addOverlay(marker);
addClickHandler(content,marker);
});
}
});
});
var opts = {
width : 250, // 資訊視窗寬度
height: 80, // 資訊視窗高度
title : "資訊視窗" , // 資訊視窗標題
enableMessage:true//設定允許資訊窗傳送短息
};
//點選將資訊內容加入白標註中
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)}
);
}
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 建立資訊視窗物件
map.openInfoWindow(infoWindow,point); //開啟資訊視窗
}
var point = new BMap.Point(108.955665, 34.274037); // 建立點座標
map.centerAndZoom(point, 15); // 初始化地圖,設定中心點座標和地圖級別
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
$(function(){
$.ajax({
url:"${pageContext.request.contextPath }/yeeving/getTCiwsYeeving",
type:"get",
success:function(result){
var lng = result.extend.tCiwsYeevingList[0].longitude;
var lat = result.extend.tCiwsYeevingList[0].lat;
console.log(result);
//var point = new BMap.Point(108.95394, 34.27165);
$.each(result.extend.tCiwsYeevingList,function(index,item){
var point = new BMap.Point(item.longitude,item.lat);
var content = item.address;
console.log(content);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 建立標註
map.addOverlay(marker);
addClickHandler(content,marker);
});
}
});
});
var opts = {
width : 250, // 資訊視窗寬度
height: 80, // 資訊視窗高度
title : "資訊視窗" , // 資訊視窗標題
enableMessage:true//設定允許資訊窗傳送短息
};
//點選將資訊內容加入白標註中
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)}
);
}
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 建立資訊視窗物件
map.openInfoWindow(infoWindow,point); //開啟資訊視窗
}