当前位置:Gxlcms > PHP教程 > php+js实现百度地图多点标注

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

时间:2021-07-01 10:21:17 帮助过:3人阅读

这篇文章主要介绍了php+js实现百度地图多点标注的方法,涉及php结合js针对百度地图接口调用与json操作相关技巧,需要的朋友可以参考下

具体如下:

1.php创建json数据

  1. $products = $this->product_db->select($where);
  2. $products_json = json_encode($products);

2.js传入json数据

类似于这样的结构

  1. var markerArr = [{
  2. title: "名称:广州火车站",
  3. point: "113.264531,23.157003",
  4. address: "广东省广州市广州火车站",
  5. tel: "12306"
  6. }, {
  7. title: "名称:广州塔(赤岗塔)",
  8. point: "113.330934,23.113401",
  9. address: "广东省广州市广州塔(赤岗塔) ",
  10. tel: "18500000000"
  11. }, {
  12. title: "名称:广州动物园",
  13. point: "113.312213,23.147267",
  14. address: "广东省广州市广州动物园",
  15. tel: "18500000000"
  16. }, {
  17. title: "名称:天河公园",
  18. point: "113.372867,23.134274",
  19. address: "广东省广州市天河公园",
  20. tel: "18500000000"
  21. }];

js擅长处理json数据

  1. <script>
  2. var products_json = {$products_json};
  3. // 百度地图
  4. var citymap = new citymap(products_json,'宿迁');
  5. </script>

3.处理地图

  1. document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1We8imivxZnaKMujZIrlDZ0v"></script>');
  2. function citymap(markerArr, cityName){
  3. this.markerArr = markerArr;
  4. this.cityName = cityName;
  5. this.initMap = function() {
  6. this.createMap();//创建地图
  7. this.setMapEvent();//设置地图事件
  8. this.addMapControl();//向地图添加控件
  9. };
  10. this.createMap = function() {
  11. var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
  12. map.centerAndZoom(cityName,'13');
  13. window.map = map;//将map变量存储在全局
  14. // 绘制点
  15. for (var i = 0; i < markerArr.length; i++) {
  16. var p0 = markerArr[i].baidu_lng;
  17. var p1 = markerArr[i].baidu_lat;
  18. var maker = this.addMarker(new window.BMap.Point(p0, p1),markerArr[i],i );
  19. this.addInfoWindow(maker, markerArr[i], i);
  20. }
  21. };
  22. this.addMarker = function(point,pro,index) {
  23. var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
  24. new BMap.Size(23, 25), {
  25. offset: new BMap.Size(10, 25),
  26. imageOffset: new BMap.Size(0, 0 - index * 25)
  27. });
  28. var marker = new BMap.Marker(point, {
  29. icon: myIcon
  30. });
  31. map.addOverlay(marker);
  32. var label = new BMap.Label(pro.name,{offset:new BMap.Size(20,-10)});
  33. // 设置label样式
  34. label.setStyle({
  35. color : "#CC3333",
  36. fontSize : "13px",
  37. backgroundColor :"#CCFFFF",
  38. border :"0",
  39. fontWeight :"bold"
  40. });
  41. marker.setLabel(label);
  42. return marker;
  43. };
  44. this.addInfoWindow = function(marker,pro) {
  45. //pop弹窗标题
  46. var title = '<p style="font-weight:bold;color:#CE5521;font-size:14px"><a href="?m=home&c=product&id='+ pro.id +'">' + pro.name + '</a></p>';
  47. //pop弹窗信息
  48. var html = [];
  49. html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
  50. html.push('<tr>');
  51. html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');
  52. html.push('<td style="vertical-align:top;line-height:16px">' + pro.address + ' </td>');
  53. html.push('</tr>');
  54. html.push('</tbody></table>');
  55. var infoWindow = new BMap.InfoWindow(html.join(""), {
  56. title: title,
  57. width: 200
  58. });
  59. var openInfoWinFun = function() {
  60. marker.openInfoWindow(infoWindow);
  61. };
  62. marker.addEventListener("click", openInfoWinFun);
  63. return openInfoWinFun;
  64. }
  65. this.setMapEvent = function() {
  66. map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
  67. // map.enableScrollWheelZoom();//启用地图滚轮放大缩小
  68. map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
  69. map.enableKeyboard();//启用键盘上下左右键移动地图
  70. };
  71. this.addMapControl = function() {
  72. //向地图中添加缩放控件
  73. var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
  74. map.addControl(ctrl_nav);
  75. //向地图中添加缩略图控件
  76. var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
  77. map.addControl(ctrl_ove);
  78. //向地图中添加比例尺控件
  79. var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
  80. map.addControl(ctrl_sca);
  81. };
  82. this.initMap();
  83. }

以上就是本文的全部内容,希望对大家的学习有所帮助。


相关推荐:

php实现获取ip及网址的方法

PHP中Laravel 关联查询返回错误id的解决方法详解

php file_get_contents实现取文件中数组元素的方法

以上就是php+js实现百度地图多点标注的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行