map.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  6. <style type="text/css">
  7. body, html, #allmap {
  8. width: 100%;
  9. height: 100%;
  10. overflow: hidden;
  11. margin: 0;
  12. }
  13. #suggestId {
  14. position: absolute;
  15. z-index: 9999;
  16. right: 20px;
  17. top: 20px;
  18. line-height: 32px;
  19. padding: 0 10px;
  20. width: 300px;
  21. border: 1px solid #e4e6e7;
  22. }
  23. #suggestId:focus {
  24. outline: none;
  25. }
  26. </style>
  27. <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=KxkuAcGBup6sD1XxaDW85KBG"></script>
  28. <title>点击地图获取当前经纬度</title>
  29. </head>
  30. <body>
  31. <input id="lng_input" type="hidden" value="{$lng}"/>
  32. <input id="lat_input" type="hidden" value="{$lat}"/>
  33. <input id="address_input" type="hidden"/>
  34. <input id="city_input" type="hidden"/>
  35. <input id="province_input" type="hidden"/>
  36. <input id="district_input" type="hidden"/>
  37. <input id="suggestId" type="text" placeholder="请输入地址"/>
  38. <div>百度地图商业使用需要商业授权,如果您商业使用联系开发者或百度地图咨询授权问题,也可删除此页面!</div>
  39. <div id="allmap"></div>
  40. <script type="text/javascript">
  41. // 百度地图API功能
  42. var center = new BMap.Point({$lng}, {$lat});
  43. var map = new BMap.Map("allmap");
  44. map.centerAndZoom(new BMap.Point(116.404, 39.915), 8);
  45. map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
  46. map.enableContinuousZoom();
  47. var map_ac = new BMap.Autocomplete( //建立一个自动完成的对象
  48. {
  49. "input": "suggestId",
  50. "location": map
  51. });
  52. var marker = new BMap.Marker(center); // 创建标注
  53. map.addOverlay(marker); // 将标注添加到地图中
  54. marker.enableDragging(); //可拖拽
  55. //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
  56. map_ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
  57. var _value = e.item.value;
  58. function myFun() {
  59. var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
  60. map.centerAndZoom(pp, 8);
  61. marker.setPosition(pp);
  62. mgetLocation(pp);
  63. }
  64. myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
  65. var local = new BMap.LocalSearch(map, { //智能搜索
  66. onSearchComplete: myFun
  67. });
  68. local.search(myValue);
  69. });
  70. var opts = {
  71. width: 200, // 信息窗口宽度
  72. height: 30, // 信息窗口高度
  73. title: "", // 信息窗口标题
  74. enableMessage: false,//设置允许信息窗发送短息
  75. };
  76. var infoWindow = new BMap.InfoWindow("{:lang('DRAG_MAP_TO_SET_LOCATION')}", opts); // 创建信息窗口对象
  77. marker.openInfoWindow(infoWindow);
  78. var gc = new BMap.Geocoder();
  79. function msetpoint(e) {
  80. document.getElementById("lng_input").value = e.point.lng;
  81. document.getElementById("lat_input").value = e.point.lat;
  82. marker.setPosition(new BMap.Point(e.point.lng, e.point.lat));
  83. mgetLocation(e.point);
  84. }
  85. function mgetLocation(point) {
  86. document.getElementById("lng_input").value = point.lng;
  87. document.getElementById("lat_input").value = point.lat;
  88. gc.getLocation(point, function (rs) {
  89. var addComp = rs.addressComponents;
  90. marker.openInfoWindow(new BMap.InfoWindow(rs.address, opts));
  91. document.getElementById("address_input").value = rs.address;
  92. document.getElementById("city_input").value = addComp.city;
  93. document.getElementById("province_input").value = addComp.province;
  94. document.getElementById("district_input").value = addComp.district;
  95. //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
  96. });
  97. }
  98. marker.addEventListener("dragend", msetpoint);
  99. map.addEventListener("click", msetpoint);
  100. function tilesloaded() {
  101. map.setCenter(center); //设置地图中心点。center除了可以为坐标点以外,还支持城市名
  102. mgetLocation(center);
  103. // map.setZoom(8); //将视图切换到指定的缩放等级,中心点坐标不变
  104. map.removeEventListener("tilesloaded", tilesloaded);
  105. }
  106. map.addEventListener("tilesloaded", tilesloaded);
  107. function confirm() {
  108. var data = {};
  109. data.lng = document.getElementById("lng_input").value;
  110. data.lat = document.getElementById("lat_input").value;
  111. data.address = document.getElementById("address_input").value;
  112. data.city = document.getElementById("city_input").value;
  113. data.province = document.getElementById("province_input").value;
  114. data.district = document.getElementById("district_input").value;
  115. return data;
  116. }
  117. </script>
  118. </body>
  119. </html>