本文实例讲述了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) {
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;100%;font:12px arial,simsun,sans-serif"><tbody>'
);
html.push(
'<tr>'
);
html.push(
'<td style="vertical-align:top;line-height:16px;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,
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程序设计有所帮助。
