_baidumap.blade.php 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <style type="text/css">
  2. #allmap {width:100%;height:100%;overflow:hidden;margin:0;font-family:"微软雅黑";}
  3. </style>
  4. <div id="allmap"></div>
  5. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=L6pPkBrcAaePZ0uKp9qsKiZx"></script>
  6. <script type="text/javascript">
  7. // 百度地图API功能
  8. var marker;
  9. var map = new BMap.Map("allmap");
  10. var point = new BMap.Point(<?php
  11. if(isset($data['lon']) && $data['lon']){
  12. echo "'".$data['lon']."'";
  13. }else{
  14. echo '104.072343';
  15. }
  16. ?>, <?php
  17. if(isset($data['lat']) && $data['lat']){
  18. echo "'".$data['lat']."'";
  19. }else{
  20. echo '30.663538';
  21. }
  22. ?>);
  23. map.centerAndZoom(point, 12);
  24. // 标记默认点并监听
  25. marker = new BMap.Marker(point);
  26. map.addOverlay(marker);
  27. marker.enableDragging();
  28. marker.addEventListener("dragend", function(e){
  29. output(e);
  30. });
  31. // 创建地址解析器实例
  32. var myGeo = new BMap.Geocoder();
  33. // 坐标输出
  34. var output = function(e){
  35. if(e.hasOwnProperty('lng')){
  36. var pt = e;
  37. }else{
  38. var pt = e.point;
  39. }
  40. document.getElementById("info_lon").value = pt.lng;
  41. document.getElementById("info_lat").value = pt.lat;
  42. myGeo.getLocation(pt, function(rs){
  43. console.log(rs);
  44. var addComp = rs.addressComponents;
  45. if($("#info_address").val()=='') {
  46. var address = addComp.province + " " + addComp.city + " " + addComp.district + " " + addComp.street + " " + addComp.streetNumber;
  47. document.getElementById("info_address").value = address;
  48. }
  49. });
  50. }
  51. // 点击创建新点
  52. map.addEventListener("click", function(e){
  53. map.clearOverlays();
  54. var point = new BMap.Point(e.point.lng ,e.point.lat);
  55. var marker = new BMap.Marker(point);
  56. map.addOverlay(marker);
  57. marker.enableDragging();
  58. output(e);
  59. marker.addEventListener("dragend", function(e){
  60. output(e);
  61. });
  62. });
  63. //地址搜索功能
  64. function find_address(str){
  65. var address = str ? str : '成都市天府广场';
  66. // 将地址解析结果显示在地图上,并调整地图视野
  67. myGeo.getPoint(address, function(point){
  68. if (point) {
  69. map.clearOverlays();
  70. map.centerAndZoom(point, 16);
  71. marker = new BMap.Marker(point);
  72. map.addOverlay(marker);
  73. marker.enableDragging();
  74. output(point);
  75. marker.addEventListener("dragend", function(e){
  76. output(e);
  77. });
  78. }else{
  79. alert("您选择地址没有解析到结果!");
  80. }
  81. }, "成都市");
  82. }
  83. </script>