php+js实现百度地图多点标注的方法

网友投稿 941 2022-05-29

本文实例讲述了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

php+js实现百度地图多点标注的方法

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

地址:' + 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小时内删除侵权内容。

上一篇:企业级应用系统和微信集成的系列教程之七:使用Redis存储微信用户和公众号的对话记录
下一篇:Linux平台的SVN服务器的配置及搭建
相关文章