php+js實現百度地圖多點標註的方法
阿新 • • 發佈：2018-11-11
本文例項講述了php+js實現百度地圖多點標註的方法。分享給大家供大家參考，具體如下：
1.php建立json資料
?| 1 2 |
$products
=
$this
->product_db->select(
$where
);$products_json
= json_encode(
$products
);
|
2.js傳入json資料
類似於這樣的結構
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var
markerArr = [{
title:
"名稱：廣州火車站"
,
point:
"113.264531,23.157003"
,
address: "廣東省廣州市廣州火車站"
,
tel:
"12306"
}, {
title:
"名稱：廣州塔（赤崗塔）"
,
point:
"113.330934,23.113401"
,
address:
"廣東省廣州市廣州塔（赤崗塔） "
,
tel:
"18500000000"
}, {
title:
"名稱：廣州動物園"
,
point:
"113.312213,23.147267"
,
address:
"廣東省廣州市廣州動物園"
,
tel:
"18500000000"
}, {
title:
"名稱：天河公園"
,
point:
"113.372867,23.134274"
,
address:
"廣東省廣州市天河公園"
,
tel:
"18500000000"
}];
|
js擅長處理json資料
?| 1 2 3 4 5 |
<script>
var
products_json = {$products_json};
// 百度地圖
var
citymap =
new
citymap(products_json,
'宿遷'
);
</script>
|
3.處理地圖
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
document.write(
'<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1We8imivxZnaKMujZIrlDZ0v"></script>'
);
function
citymap(markerArr, cityName){
this
.markerArr = markerArr;
this
.cityName = cityName;
this
.initMap =
function
() {
this
.createMap();
//建立地圖
this
.setMapEvent();
//設定地圖事件
this
.addMapControl();
//向地圖新增控制元件
};
this
.createMap =
function
() {
var
map =
new
BMap.Map(
"dituContent"
);
//在百度地圖容器中建立一個地圖
map.centerAndZoom(cityName,
'13'
);
window.map = map;
//將map變數儲存在全域性
// 繪製點
for
(
var
i = 0; i < markerArr.length; i++) {
var
p0 = markerArr[i].baidu_lng;
var
p1 = markerArr[i].baidu_lat;
var
maker =
this
.addMarker(
new
window.BMap.Point(p0, p1),markerArr[i],i );
this
.addInfoWindow(maker, markerArr[i], i);
}
};
this
.addMarker =
function
(point,pro,index) {
var
myIcon =
new
BMap.Icon(
"http://api.map.baidu.com/img/markers.png"
,
new
BMap.Size(23, 25), {
offset:
new
BMap.Size(10, 25),
imageOffset:
new
BMap.Size(0, 0 - index * 25)
});
var
marker =
new
BMap.Marker(point, {
icon: myIcon
});
map.addOverlay(marker);
var
label =
new
BMap.Label(pro.name,{offset:
new
BMap.Size(20,-10)});
// 設定label樣式
label.setStyle({
color :
"#CC3333"
,
fontSize :
"13px"
,
backgroundColor :
"#CCFFFF"
,
border :
"0"
,
fontWeight :
"bold"
});
marker.setLabel(label);
return
marker;
};
this
.addInfoWindow =
function
(marker,pro) {
//pop彈窗標題
var
title =
'<div style="font-weight:bold;color:#CE5521;font-size:14px"><a href="?m=home&c=product&id='
+ pro.id +
'">'
+ pro.name +
'</a></div>'
;
//pop彈窗資訊
var
html = [];
html.push(
'<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'
);
html.push(
'<tr>'
);
html.push(
'<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>'
);
html.push(
'<td style="vertical-align:top;line-height:16px">'
+ pro.address +
' </td>'
);
html.push(
'</tr>'
);
html.push(
'</tbody></table>'
);
var
infoWindow =
new
BMap.InfoWindow(html.join(
""
), {
title: title,
width: 200
});
var
openInfoWinFun =
function
() {
marker.openInfoWindow(infoWindow);
};
marker.addEventListener(
"click"
, openInfoWinFun);
return
openInfoWinFun;
}
this
.setMapEvent =
function
() {
map.enableDragging();
//啟用地圖拖拽事件，預設啟用(可不寫)
// map.enableScrollWheelZoom();//啟用地圖滾輪放大縮小
map.enableDoubleClickZoom();
//啟用滑鼠雙擊放大，預設啟用(可不寫)
map.enableKeyboard();
//啟用鍵盤上下左右鍵移動地圖
};
this
.addMapControl =
function
() {
//向地圖中新增縮放控制元件
var
ctrl_nav =
new
BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地圖中新增縮圖控制元件
var
ctrl_ove =
new
BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地圖中新增比例尺控制元件
var
ctrl_sca =
new
BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
};
this
.initMap();
}
|
更多關於PHP相關內容感興趣的讀者可檢視本站專題：《php curl用法總結》、《PHP陣列(Array)操作技巧大全》、《php排序演算法總結》、《PHP常用遍歷演算法與技巧總結》、《PHP資料結構與演算法教程》、《php程式設計演算法總結》、《PHP數學運算技巧總結》、《php正則表示式用法總結》、《PHP運算與運算子用法總結》、《php字串(string)用法總結》及《php常見資料庫操作技巧彙總》
希望本文所述對大家PHP程式設計有所幫助。