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( '

html.push( '

html.push( '

html.push( '

html.push( '

html.push( '

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小时内删除侵权内容。