BaiDuMap.cshtml 3.8 KB

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