php+js實現百度地圖多點標注的方法
本文實例講述了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
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( '' );
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 = '
' ;//pop彈窗信息
var html = [];
html.push( '
| 地址: | ' );' + pro.address + ' | ' );
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程序設計有所幫助。
PHP
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
