gdmap.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <div class="">
  2. <input type="text" readonly class="form-control" id="map_maploaction_{$name}" name="{$name}" value="{$val}" style="margin-bottom: 5px;">
  3. {if isset($province) && !empty($province)}
  4. <input type="hidden" class="form-control" name="{$province}" value="{$pval}" id="s_province">
  5. {/if}
  6. {if isset($district) && !empty($district)}
  7. <input type="hidden" class="form-control" name="{$district}" value="{$dval}" id="s_district">
  8. {/if}
  9. <button id="gdmap_start_stop_{$name}" data-flag="1" onclick="changeBtn(this)" class="btn btn-sm btn-primary" type="button">开始标注</button>
  10. <input type="text" id="gdmap_pickerInput_{$name}" class="search form-control" placeholder="搜索地址">
  11. <div id="gdmap_container_{$name}" style="width:100%; height:300px"></div>
  12. </div>
  13. <script type="text/javascript">
  14. window._AMapSecurityConfig = {
  15. securityJsCode:"{:config('app.gdsecret')}",
  16. }
  17. </script>
  18. <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key={:config('app.gdkey')}"></script>
  19. <script src="https://webapi.amap.com/ui/1.0/main.js"></script>
  20. <script type="text/javascript">
  21. var map = new AMap.Map('gdmap_container_{$name}', {
  22. zoom: 16,
  23. scrollWheel: true
  24. });
  25. var latlng = "{$val}";
  26. var lat = "";
  27. var lng = "";
  28. if(latlng){
  29. latlngs = latlng.split('-');
  30. lat = latlngs[0];
  31. lng = latlngs[1];
  32. }
  33. if(lat != ''){
  34. map.setCenter([lng,lat]);
  35. }
  36. //地图中添加地图操作ToolBar插件
  37. map.plugin(['AMap.ToolBar'], function() {
  38. var toolBar = new AMap.ToolBar();
  39. map.addControl(toolBar);
  40. });
  41. AMapUI.loadUI(['misc/PositionPicker','misc/PoiPicker'], function(PositionPicker,PoiPicker) {
  42. var positionPicker = new PositionPicker({
  43. mode: 'dragMap', //dragMap-拖拽地图 dragMarker-拖拽marker
  44. map: map,
  45. });
  46. positionPicker.on('success', function(positionResult) {
  47. var geocoder = new AMap.Geocoder();
  48. //地理编码,返回地理编码结果
  49. geocoder.getLocation(positionResult.address, function(status, result) {
  50. if($('#gdmap_start_stop_{$name}').attr('data-flag') == 0){
  51. if (status === 'complete' && result.info === 'OK') {
  52. $('#map_maploaction_{$name}').val(positionResult.position.lat+'-'+positionResult.position.lng);
  53. var province = result.geocodes[0].addressComponent.province;
  54. var district = result.geocodes[0].addressComponent.district;
  55. $('#s_province').val(province);
  56. $('#s_district').val(district);
  57. }
  58. }else {
  59. if (status === 'complete' && result.info === 'OK') {
  60. var province = result.geocodes[0].addressComponent.province;
  61. var district = result.geocodes[0].addressComponent.district;
  62. $('#s_province').val(province);
  63. $('#s_district').val(district);
  64. }
  65. }
  66. });
  67. });
  68. positionPicker.start();
  69. var poiPicker = new PoiPicker({
  70. input: 'gdmap_pickerInput_{$name}'
  71. });
  72. poiPickerReady(poiPicker);
  73. });
  74. function poiPickerReady(poiPicker) {
  75. //选取了某个POI
  76. poiPicker.on('poiPicked', function(poiResult) {
  77. var poi = poiResult.item;
  78. map.setCenter(poi.location);
  79. });
  80. }
  81. function changeBtn(_self){
  82. var flag = $(_self).attr('data-flag');
  83. if(flag == 1){
  84. $(_self).attr('data-flag',0).html('结束标注');
  85. }else{
  86. $(_self).attr('data-flag',1).html('开始标注');
  87. }
  88. }
  89. </script>