BaiduMap.cshtml 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. @{
  2. ViewBag.Title = "百度地图";
  3. Layout = "~/Views/Shared/_BaiduMap.cshtml";
  4. }
  5. <div class="main-div">
  6. <div id='allmap' style='width: 100%; height: 100%; position: absolute;'></div>
  7. <table cellspacing="1" width="100%" style="position: absolute;top: 20px;" >
  8. <tr>
  9. <td>
  10. <span style="margin-left: 30px">关键字:</span>
  11. <input type="text" id="address" value=""/>
  12. <input type="button" value="搜索" onclick="searchAddress()" />
  13. </td>
  14. <td>
  15. </td>
  16. <td>经度</td>
  17. <td><input type="text" name="lng" id="lng" value=""/>
  18. </td>
  19. <td>纬度</td>
  20. <td><input type="text" name="lat" id="lat" value=""/>
  21. </td>
  22. <td>地址</td>
  23. <td>
  24. <input type='text' value='' name='sever_add' id='sever_add' readonly />
  25. </td>
  26. </tr>
  27. </table>
  28. </div>
  29. <script>
  30. function validate() {
  31. var sever_add = document.getElementsByName('sever_add')[0].value;
  32. if (isNull(sever_add)) {
  33. alert('请选择地址');
  34. return false;
  35. }
  36. return true;
  37. }
  38. //判断是否是空
  39. function isNull(a) {
  40. return (a == '' || typeof (a) == 'undefined' || a == null) ? true : false;
  41. }
  42. var map = new BMap.Map("allmap");
  43. var geoc = new BMap.Geocoder(); //地址解析对象
  44. var markersArray = [];
  45. var geolocation = new BMap.Geolocation();
  46. var point = new BMap.Point("@System.Configuration.ConfigurationManager.AppSettings["LngAndLat"].Split('|')[0]", "@System.Configuration.ConfigurationManager.AppSettings["LngAndLat"].Split('|')[1]");
  47. map.centerAndZoom(point, 12); // 中心点
  48. map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  49. //geolocation.getCurrentPosition(function (r) {
  50. // if (this.getStatus() == BMAP_STATUS_SUCCESS) {
  51. // var mk = new BMap.Marker(r.point);
  52. // map.addOverlay(mk);
  53. // map.panTo(r.point);
  54. // map.enableScrollWheelZoom(true);
  55. // }
  56. // else {
  57. // alert('failed' + this.getStatus());
  58. // }
  59. //}, { enableHighAccuracy: true })
  60. map.addEventListener("click", showInfo);
  61. var local = new BMap.LocalSearch(map, {
  62. renderOptions: { map: map }
  63. });
  64. //清除标识
  65. function clearOverlays() {
  66. if (markersArray) {
  67. for (i in markersArray) {
  68. map.removeOverlay(markersArray[i])
  69. }
  70. }
  71. }
  72. //地图上标注
  73. function addMarker(point) {
  74. var marker = new BMap.Marker(point);
  75. markersArray.push(marker);
  76. clearOverlays();
  77. map.addOverlay(marker);
  78. }
  79. //点击地图时间处理
  80. function showInfo(e) {
  81. document.getElementById('lng').value = e.point.lng;
  82. document.getElementById('lat').value = e.point.lat;
  83. geoc.getLocation(e.point, function (rs) {
  84. var addComp = rs.addressComponents;
  85. var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
  86. document.getElementById('sever_add').value = address;
  87. });
  88. addMarker(e.point);
  89. }
  90. // 搜索地址
  91. function searchAddress() {
  92. var value = document.getElementById('address').value;
  93. if (!(value === "")) {
  94. local.search(value);
  95. }
  96. }
  97. // 返回数据
  98. function AcceptClick(callBack) {
  99. var lng = document.getElementById('lng').value;
  100. var lat = document.getElementById('lat').value;
  101. if (!(lng === "" || lat === "")) {
  102. callBack(document.getElementById('lng').value + "|" + document.getElementById('lat').value);
  103. dialogClose();
  104. }
  105. }
  106. </script>