map.blade.php 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <div class="{{$viewClass['form-group']}}">
  2. <label class="{{$viewClass['label']}} control-label">{!! $label !!}</label>
  3. <div class="{{$viewClass['field']}}">
  4. @include('admin::form.error')
  5. @if($type === 'baidu')
  6. <div class="row mb-1">
  7. <div class="col-md-5 col-md-offset-3">
  8. <div class="input-group">
  9. <input type="text" placeholder="{{ trans('admin.search') }}" class="form-control" id="{{ $searchId }}">
  10. <span class="input-group-btn">
  11. <button type="button" class="btn btn-primary btn-flat"><i class="fa fa-search"></i></button>
  12. </span>
  13. </div>
  14. </div>
  15. </div>
  16. @endif
  17. <div class="{{ $class }}">
  18. <div class="form-map" style="width: 100%;height: {{ $height }}"></div>
  19. <input type="hidden" class="form-lat" name="{{ $name['lat'] }}" value="{{ $value['lat'] ?? null }}" {!! $attributes !!} />
  20. <input type="hidden" class="form-lng" name="{{$name['lng']}}" value="{{ $value['lng'] ?? null }}" {!! $attributes !!} />
  21. </div>
  22. @include('admin::form.help-block')
  23. </div>
  24. </div>
  25. <script init="{!! $selector !!}">
  26. var lat = $this.find('.form-lat'),
  27. lng = $this.find('.form-lng'),
  28. container = $this.find('.form-map'),
  29. mapId = "_" + Dcat.helpers.random();
  30. container.attr('id', mapId);
  31. @if($type === 'google')
  32. function initGoogleMap() {
  33. var LatLng = new google.maps.LatLng(lat.val(), lng.val());
  34. var options = {
  35. zoom: 13,
  36. center: LatLng,
  37. panControl: false,
  38. zoomControl: true,
  39. scaleControl: true,
  40. mapTypeId: google.maps.MapTypeId.ROADMAP
  41. }
  42. var map = new google.maps.Map(container[0], options);
  43. var marker = new google.maps.Marker({
  44. position: LatLng,
  45. map: map,
  46. title: 'Drag Me!',
  47. draggable: true
  48. });
  49. google.maps.event.addListener(marker, 'dragend', function (event) {
  50. lat.val(event.latLng.lat());
  51. lng.val(event.latLng.lng());
  52. });
  53. }
  54. initGoogleMap();
  55. @endif
  56. @if($type === 'tencent')
  57. function initTencentMap() {
  58. var center = new qq.maps.LatLng(lat.val(), lng.val());
  59. var map = new qq.maps.Map(container[0], {
  60. center: center,
  61. zoom: 13
  62. });
  63. var marker = new qq.maps.Marker({
  64. position: center,
  65. draggable: true,
  66. map: map
  67. });
  68. if( ! lat.val() || ! lng.val()) {
  69. var citylocation = new qq.maps.CityService({
  70. complete : function(result){
  71. map.setCenter(result.detail.latLng);
  72. marker.setPosition(result.detail.latLng);
  73. }
  74. });
  75. citylocation.searchLocalCity();
  76. }
  77. qq.maps.event.addListener(map, 'click', function(event) {
  78. marker.setPosition(event.latLng);
  79. });
  80. qq.maps.event.addListener(marker, 'position_changed', function(event) {
  81. var position = marker.getPosition();
  82. lat.val(position.getLat());
  83. lng.val(position.getLng());
  84. });
  85. }
  86. initTencentMap();
  87. @endif
  88. @if($type === 'yandex')
  89. function initYandexMap() {
  90. ymaps.ready(function(){
  91. var myMap = new ymaps.Map(mapId, {
  92. center: [lat.val(), lng.val()],
  93. zoom: 18
  94. });
  95. var myPlacemark = new ymaps.Placemark([lat.val(), lng.val()], {
  96. }, {
  97. preset: 'islands#redDotIcon',
  98. draggable: true
  99. });
  100. myPlacemark.events.add(['dragend'], function (e) {
  101. lat.val(myPlacemark.geometry.getCoordinates()[0]);
  102. lng.val(myPlacemark.geometry.getCoordinates()[1]);
  103. });
  104. myMap.geoObjects.add(myPlacemark);
  105. });
  106. }
  107. initYandexMap();
  108. @endif
  109. @if($type === 'baidu')
  110. function initBaiduMap() {
  111. var map = new BMap.Map(mapId);
  112. var point = new BMap.Point(lng.val(), lat.val());
  113. map.centerAndZoom(point, 15);
  114. map.enableScrollWheelZoom(true);
  115. var marker = new BMap.Marker(point);
  116. map.addOverlay(marker);
  117. marker.enableDragging();
  118. if (! lat.val() || ! lng.val()) {
  119. var geolocation = new BMap.Geolocation();
  120. geolocation.getCurrentPosition(function(e){
  121. if (this.getStatus() == BMAP_STATUS_SUCCESS) {
  122. map.panTo(e.point);
  123. marker.setPosition(e.point);
  124. lat.val(e.point.lat);
  125. lng.val(e.point.lng);
  126. } else {
  127. console.log('failed'+this.getStatus());
  128. }
  129. },{enableHighAccuracy: true})
  130. }
  131. map.addEventListener("click", function(e) {
  132. marker.setPosition(e.point);
  133. lat.val(e.point.lat);
  134. lng.val(e.point.lng);
  135. });
  136. marker.addEventListener("dragend", function(e) {
  137. lat.val(e.point.lat);
  138. lng.val(e.point.lng);
  139. });
  140. var ac = new BMap.Autocomplete(
  141. {"input" : "{{ $searchId }}"
  142. ,"location" : map
  143. });
  144. var address;
  145. ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
  146. var _value = e.item.value;
  147. address = _value.province + _value.city + _value.district + _value.street + _value.business;
  148. setPlace();
  149. });
  150. function setPlace() {
  151. function myFun() {
  152. var pp = local.getResults().getPoi(0).point;
  153. map.centerAndZoom(pp, 15);
  154. marker.setPosition(pp);
  155. lat.val(pp.lat);
  156. lng.val(pp.lng);
  157. }
  158. var local = new BMap.LocalSearch(map, {
  159. onSearchComplete: myFun
  160. });
  161. local.search(address);
  162. }
  163. }
  164. initBaiduMap();
  165. @endif
  166. </script>